Redux中无法引用数组内对象属性？求助排查问题

我看你遇到的问题核心是异步数据加载的竞态导致的属性访问问题，咱们一步步拆解：

为什么会出现undefined？ #

你的组件逻辑里，第一次渲染时props.news是空数组，!props.news[0]为true，于是触发getNews请求——但这个请求是异步的，在请求返回前，组件已经完成了第一次渲染，此时console.log(props.news[0])打印的其实是undefined，这时候如果你尝试访问.datetime，自然会得到undefined或者报错。

等异步请求完成，Redux状态更新，组件重新渲染，这时候props.news[0]才有完整的对象，控制台打印的其实是这次渲染的结果，但你之前看到的undefined是第一次渲染时的产物，两者混在一起就造成了困惑。

具体修复步骤 #

1. 严格的空值检查再访问属性
   不管是打印还是渲染，都要确保props.news[0]存在后再操作：

   {props.news[0] && (
     <>
       <h1>{props.news[0].datetime}</h1>
       <p>{props.news[0].headline}</p>
     </>
   )}
   

   或者用ES6的可选链操作符，更简洁安全：

   <h1>{props.news[0]?.datetime}</h1>
   

2. 优化请求触发的判断逻辑
   你现在用!props.news[0]来判断是否请求，但空数组的news[0]本身就是undefined，!undefined为true，不过如果后续news数组里的第一个元素是假值（虽然这里不太可能），会重复触发请求。更稳妥的方式是检查数组长度：

   if (props.news.length === 0) {
     props.getNews(currentCompany[2]);
   }
   

3. 确认Redux reducer的状态更新是否正确
   确保reducer在处理获取新闻的action时，是把完整的数组赋值给news，而不是嵌套或者错误覆盖：

   // 示例reducer代码
   const initialState = {
     quote: [],
     price: '',
     news: []
   };
   
   function pullStocksReducer(state = initialState, action) {
     switch(action.type) {
       case 'GET_NEWS_SUCCESS':
         return {
           ...state,
           news: action.payload // 这里payload必须是完整的新闻数组
         };
       default:
         return state;
     }
   }
   

这样调整后，就能避免在数据未加载完成时访问属性导致的undefined问题啦～

内容的提问来源于stack exchange，提问作者Jared Gilpin