Question

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

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>

Answer 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')

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

1 个答案: