Question

如何仅在完成某个操作后才渲染 React 组件？

2021-06-07

436

javascript reactjs

我想显示本地存储的 JSON 文件中 JSON 对象的某些属性。因此，我尝试这样做：

import { DistroList as distroList } from '../backend/distroList.json'

 useEffect(() => {
    
    for(let distro in distroList) {
        if(distroList[distro].Name === distroName) {
            setDistroFeature(distroList[distro])
        }
    }

}, [])

return (
    <div>
        <h1>{distroFeature.Origin}</h1>
    </div>
)

由于 for 循环需要时间来查找匹配的对象，并且组件到那时才安装，因此我收到错误

TypeError: Cannot read property 'Origin' of null

我尝试使用 fetch API 并努力使其异步。我做不到。我想做这样的事情：

import { DistroList as distroList } from '../backend/distroList.json'

 useEffect(() => {

    // Fetch the object from distroList.json
    // Update state variable

}, [])

return(
    Display the updated state variable
)

我该如何实现？

提前致谢 :)

Answer 1

以下解决方案之一可能适合您。

第一个解决方案。

<div>
   {distroFeature && <h1>{distroFeature.Origin}</h1>}
</div>

第二个解决方案。

<div>
   <h1>{distroFeature?.Origin}</h1>
</div>

Answer 2

您应该将 distroList 作为参数添加到 useEffect 钩子中。这样，当 distroList 的值发生变化时（在本例中为“未定义”），它将重新运行效果。

这应该有效：

import { DistroList as distroList } from '../backend/distroList.json'

 useEffect(() => {
    if (distroList && distroList.length > 0) {
        for(let distro in distroList) {
          if(distroList[distro].Name === distroName) {
              setDistroFeature(distroList[distro])
          }
      }
    }


}, [distroList])

return (
    <div>
        <h1>{distroFeature.Origin}</h1>
    </div>
)