React使用useSelector获取posts后读取length报TypeError如何解决？

该TypeError: Cannot read properties of undefined (reading 'length')报错和你使用三元表达式还是if语句的语法没有关系，核心原因是你通过useSelector从Redux store中取到的posts值为undefined，而非你预期的空数组。你当前的判断逻辑!posts.length会优先尝试读取posts的length属性，当posts本身是undefined时，自然会触发该类型错误。

另外你修改后的if写法还存在额外语法问题：else分支的JSX元素没有加return语句，就算解决了posts的undefined问题，组件也会因为没有合法返回值报错。

临时兼容写法 #

在判断长度前先判断posts本身是否存在，你可以用可选链操作符?.简化判断逻辑：

const Posts = () => {
  const posts = useSelector((state) => state.posts)

  return (
  !posts?.length ? <CircularProgress /> : (
    <Grid className={classes.container} container alignItems="stretch" spacing={3}>
      {posts.map((post) => (
        <Grid key={post._id} item xs={12} sm={6}>
          <Post post={post}/>
        </Grid>
      ))}
    </Grid>
   )
  );
};

如果使用if写法，修复后代码如下：

const Posts = () => {
  const posts = useSelector((state) => state.posts)

  if (!posts?.length) {
    return <CircularProgress />
  } 
  return (
    <Grid className={classes.container} container alignItems="stretch" spacing={3}>
      {posts.map((post) => (
        <Grid key={post._id} item xs={12} sm={6}>
          <Post post={post}/>
        </Grid>
      ))}
    </Grid>
  )
}

根因修复 #

从根源解决该问题需要检查你的Redux posts对应reducer，确保初始状态给posts字段设置了默认空数组：

// reducer初始状态示例
const initialState = {
  posts: [] // 必须显式初始化posts为数组
}

const postsReducer = (state = initialState, action) => {
  switch(action.type) {
    // 你的业务逻辑
    default:
      return state
  }
}

如果你的store中posts不在state根层级，比如路径为state.postModule.posts，需要同步修改useSelector中的取值路径。

内容的提问来源于stack exchange，提问作者Turhan Ergene