javascript - 用 UseEffect 反应 Axios 不渲染数据

Question

我一直在苦苦挣扎，从本地 json 文件中读取数据并输入到 React 渲染函数中。我首先通过componentDidMount方法通过类读取代码，但是数据总是比渲染函数执行得晚。我已经查看了许多解决方案。大多数人似乎建议使用useEffect并useState解决这个问题。

这是我到目前为止所拥有的：

import React, {useEffect, useState} from 'react';
import axios from "axios";

export default function Foo() {
    const [list, setProjects] = useState(null)

    useEffect(() => {
        axios.get('data.json')
            .then(response => {
                setProjects(response.data)
            })
    }, [])

    console.log(list);
    debugger;

    if (list !== null) {
        return (
            <div>
                Project: {/*{list.projects[0].title}*/}
            </div>
        )
    } else {
        return (
            <div>
                Loading Project Data ...
            </div>
        )
    }
}

传入数据的格式为{"projects" : [{"id": 1, "title": "some title", ...}, ... {...}]}。

问题是，即使我有一个围绕返回的空检查，代码总是跳转到第一个分支，并抱怨什么都没有（没有显示Project: {list}和Project: {list.projects[0].title}错误，因为列表被认为是空的）。控制台显示数据加载，但我怀疑存在与承诺相关的异步问题。我已经调整了初始状态，但到目前为止还没有运气。

编辑：

感谢您收到的所有回复。虽然他们帮助简化了代码并添加了额外的检查，但我仍然遇到了同样的问题，即未显示数据。似乎问题在于我分配的初始值。我将这些更改为：

const [list, setProjects] = useState({projects: [{title: "XXX"}]});

并且代码运行良好。我猜这个虚拟值一旦可用，就会被实际的 json vales 覆盖。

标签： javascriptreactjsaxios

Answer 1

而不是这个：

if (list !== null) {
    return (
        <div>
            Project: {/*{list.projects[0].title}*/}
        </div>
    )
} else {
    return (
        <div>
            Loading Project Data ...
        </div>
    )
}

我会做这样的事情：

return (
  <div>
    {list && list.projects && list.projects.length > 0 ? (
      <p>{list.projects[0].title}</p>
    ) : (
      <p>Loading Project Data...</p>
    )}      
  </div>
);