使用props中的对象数组设置默认usestate

时间:2020-10-28 14:42:58

标签: reactjs undefined jsx use-state

我有一个奇怪的情况。我有下面的代码无法正常工作。

const [result, setResult] = useState(props.fileNamesStatus.map((file, i) => {
    return {
        key: file.fileStatus
    }
}));

但是奇怪的是,它有时可以工作,有时却不能。我在JSX中使用了它,如下所示:

我收到错误Cannot read property 'key' of undefined

<ul className="in">
     {props.fileNamesStatus.map((file, i) => {
           console.log(result[i].key)     /// Cannot read property 'key' of undefined
    
     })}
</ul>

1 个答案:

答案 0 :(得分:1)

您需要添加另一个useEffect挂钩:

useEffect(() => {
  if (props.fileNamesStatus && props.fileNamesStatus.length) {
    setResult(props.fileNamesStatus.map((file, i) => {
      return {
        key: file.fileStatus
      }
    }))
  }
}, [props.fileNamesStatus])

但是即使进行了此更改,您的渲染道具和状态仍有可能不同步,因此您应该添加其他检查console.log(result[i] ? result[i].key : 'out of sync')