Javascript 说对象值未定义。我究竟做错了什么？

Question

我试图在我的 React 应用程序的 Github 存储库数组（从解析的 JSON 中检索）中显示对象的值，但是我收到一个错误，即浏览器无法读取属性 @ 987654321@ 未定义。

我可以 console.log 记录 JSON 数据和其中的对象，但如果我尝试记录这些对象中的值，我会收到错误消息。

const App = () => {
const [repoList, setRepoList] = useState({});

useEffect(() => {
    fetch("https://example.com/api")
        .then(res => res.json())
        .then(data => setRepoList(data));
});

return (
    <div>{repoList[0].id}</div>
)

}

如果我将JSON.stringify(repoList) 放在 div 元素中，它会显示数据。

如果我将JSON.stringify(repoList[0]) 放在 div 元素中，它也会显示数据。

但如果我输入类似repoList[0].id 的内容，则不会出现任何内容。列出的每个键都会发生这种情况。我可以确认钥匙在那里。我做错了什么？

Answer 1

您正在调用异步函数来填充 repo 列表。返回第一次尝试使用repoList[0].id，没有repoList[0]。当您使用useState({}) 设置它时，您可能希望将 repoList 初始化为一个非错误的虚拟对象

Answer 2

试试这个。

const [repoList, setRepoList] = useState([]); // Change to array not object.

...

return repoList.length ?
  (<React.Fragment>{repoList[0].id}</React.Fragment>) 
  : (<span>Loading ....</span>)

如果你的div 没有样式，更好的用户Fragment，它会带来更好的性能。