无法在渲染模式下访问数组元素，即使它存在

Question

我有一个带有redux状态管理器的React原生项目，使用redux saga和immer来处理免疫表。有一个简单的屏幕，我在那里获取新闻，使用onFocusEffect((。我正确地获得了数据(使用flipper和redux调试器插件进行调试(，但当我尝试访问news.news.headerImages[0]时，我的应用程序崩溃，出现错误类型错误：无法将未定义的值转换为对象。所以，这是代码：

行动创建者：

const startLoadNews = (id) => {
return { type: Types.START_LOAD_NEWS, id };
};

佐贺：

function* fetchNews(action) {
try {
const news =  yield call(FakeApi.getNewsLocal, action.id);
yield put(newsActions.loadNewsSuccess(news));
} catch (error) {
yield put(newsActions.loadNewsError('Cant load news'));
}
}
function* watchNews() {
yield takeLatest(types.START_LOAD_NEWS, fetchNews);
}
export function* newsSaga() {
yield all([watchNews()]);
}

减速器：

const initialState = {
news: {},
loading: false,
error: '',
};
export const newsReducer = (state = initialState, action) =>
produce(state, draft => {
switch (action.type) {
case types.START_LOAD_NEWS:
draft.loading = true;
draft.error = '';
draft.news = {};
break;
case types.LOAD_NEWS_SUCCESS:
draft.loading = false;
draft.error = '';
draft.news = {...action.news};
break;
case types.LOAD_NEWS_ERROR:
draft.loading = false;
draft.error = action.error;
draft.news = {};
break;
}
});

还有我的NewsScreen组件，连接到商店：

export const NewsScreen = (params) => {
const { route, news, loadNews } = params;
const { newsId } = route.params;
useFocusEffect(
useCallback(() => { loadNews(newsId); }, [])
);
const testImg = 'https://img.freepik.com/free-photo/confident-business-team-with-leader_1098-3228.jpg';
return (
news.loading ? (
<Spinner/>
) : (
<View style={styles.container}>
<ScrollView>
{true && (
<TouchableOpacity>
<ImageBackground style={styles.image} source={{uri: news.news.headerImages[0]}}>
<View style={styles.notifyer}>
<Notifyer>1-3</Notifyer>
</View>
</ImageBackground>
</TouchableOpacity>
)}
<View style={styles.content}>
<View style={styles.header}>
<Text style={styles.dimmed}>{jsDateTodmY(news.news.date)} | <Text>{news.news.category} </Text></Text>
</View>
<View style={styles.textArea}>
<Text style={styles.newsText}>{news.news.fullText}</Text>
</View>
<View style={styles.footer}>
<Text style={styles.sourceTitle}>Source</Text>
<Text style={styles.source}>{news.news.source}</Text>
</View>
</View>
</ScrollView>
</View>
)
);
};

因此，如果我用testImg替换news.news.headerImages[0]，那么如果我访问下面代码中的新闻对象，它就会加载良好的事件。我哪里做错了？

Answer 1

想好了：

在第一次渲染之后，我的状态没有news.news.headerImages数组，所以当我尝试访问未定义时。[索引]崩溃了。通过在我的初始状态中添加一个数组修复了它：

const initialState = {
news: { headerImages:[] },
loading: false,
error: '',
};