javascript - 使用 React Hooks，当我将 prop 从父组件传递给子组件时，子组件中的 prop 是未定义的

Question

我想做什么？

我正在尝试设置一个对象数组，其中数组中的值取决于父组件。

目前尝试执行此操作的代码是什么？

这里是简化的不同文件:

// Parent.

export default function Parent() {
  const [filePaths, setFilePaths] = useState();

  useEffect(() => {
    var fileContent = JSON.parse(fs.readFileSync("./config.json"); // Reading from a JSON.
    var tempFilePaths = [];
    fileContent.FilePaths.forEach((file) => {
      tempFilePaths.push(file);
    });
    setFilePaths(tempFilePaths); // Contents of "config.js" is now in the "useState".
  }, []);

  return (
    <Child filePaths={filePaths}/>
  )
}

// Child.

export default function Child({filePaths}) {
  var links = [
    {
      path: filePaths[0].Link1,
    },
    {
      path: filePaths[0].Link2,
    },
  ]

  return (
    <div>Nothing here yet, but I would map those links to front-end links.</div>
  )
}

// config.json

{
  "url": "http:localhost:3000",
  "FilePaths": [
    {
      "Link1": "C:\Documents\Something",
      "Link2": "C:\Documents\SomethingElse"
    }
  ]
}

当我在 Child 组件的 return() 中渲染“filePaths”时，“filePaths”能够被渲染，但我希望将“filePaths”设置为变量“链接”。

我期望结果是什么？

我希望子组件中的变量“links”能够正常使用，能够在子组件中使用。

实际结果如何？

启动应用程序时，我得到一个TypeError: Cannot read property '0' of undefined.

我认为可能是什么问题？

我认为子组件在父组件未完成 useEffect() 的情况下呈现。我想知道是否有办法告诉子组件等待父组件完成，然后继续设置“链接”变量。

Answer 1

filePaths 将是 undefined 因为您使用空输入调用 useState()。

有两个选项(你可以选择一个)来解决这个问题:

1. 在 useState()

   中初始化 filePaths

2. 如果 filePaths 不为 null/undefined，则返回 Child 组件。

export default function Parent() {
    const [filePaths, setFilePaths] = useState();

    useEffect(() => {
        var fileContent = JSON.parse(fs.readFileSync("./config.json"); // Reading from a JSON.
        var tempFilePaths = [];
        fileContent.FilePaths.forEach((file) => {
            tempFilePaths.push(file);
        });
        setFilePaths(tempFilePaths); // Contents of "config.js" is now in the "useState".
    }, []);

    return (
        // return the Child component if the filePaths is not null/undefined
        {filePaths && <Child filePaths={filePaths}/>}
    )
}

我个人更喜欢第二种，因为我们可以在 filePaths 仍然为 null/undefined 时添加一个加载组件。