Question

我想显示本地存储的 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: 无法读取 null 的属性 'Origin'

我尝试使用 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

您应该在 useEffect 钩子中添加 distroList 作为参数。这样，当 distroList 的值发生变化时，它会重新运行效果（在这种情况下为“not undefined”）。

这应该有效：

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

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

2 个答案: