ReactJS如何在获取数据后更新页面答案

【问题标题】：ReactJS how to update page after fetching dataReactJS如何在获取数据后更新页面
【发布时间】：2022-01-03 18:30:34
【问题描述】：

我是 ReactJS 的新手，我现在正在尝试做一个交互式 cmets 部分（取自 frontendmentor.io），但 App 组件只是没有显示它应该显示的内容

这是我的App 组件：

function App() {
    const [data, setData] = useState([]);

    useEffect(() => {
        const getComm = async () => {
            await fetchData();
        };

        getComm();
    }, []);
    console.log(data);

    const fetchData = async () => {
        const res = await fetch("db.json").then(async function (response) {
            const comm = await response.json();
            setData(comm);
            return comm;
        });
    };
    return (
        <Fragment>
            {data.length > 0 ? <Comments data={data} /> : "No Comments to Show"}
        </Fragment>
    );
}

export default App;

console.log(data) 记录两次：

第一次是空数组；
第二次是包含我的数据的数组。

如下：

如果我强制 App 打印 Comments 它只是说不能映射到未定义的变量

这是我的Comments 组件：

function Comments({ data }) {
    return (
        <div>
            {data.map((c) => (
                <Comment key={c.id} />
            ))}
        </div>
    );
}

export default Comments;

我想知道为什么页面仍然显示No Comments to Show即使日志是正确的

【问题讨论】：

您的 cmets 组件中有什么？
您的屏幕截图显示data 是一个对象而不是数组，因此它没有length 或map 属性。你的意思是data.comments？您不能只忽略数据结构的一些部分，并期望 JS 猜测您的意思是哪个属性。

标签： javascript reactjs asynchronous

【解决方案1】：

@Cristian-Irimiea 有权从 fetch 获取响应。响应是一个对象，不能迭代。您需要在状态中存储来自响应的comments

但是你有多个错误：

看看如何使用async function。你的函数fetchData 看起来很糟糕。

// Your function
const fetchData = async () => {
        const res = await fetch("db.json").then(async function (response) {
            const comm = await response.json();
            setData(comm);
            return comm;
        });
    };

// How can refactor
// fetchData function have responsibility to only fetch data and return a json
const fetchData = async () => {
  const response = await fetch("./db.json");
  const body = await response.json();

  return body;
};

您正在更新 fetch 函数中的状态，但一个好的解决方案是更新状态然后承诺解决：

useEffect(() => {
  // here we use .then to get promise response and update state
  fetchData().then((response) => setData(response.comments));
}, []);

【讨论】：

【解决方案2】：

data 的初始状态是一个数组。

从响应中获取数据后，您将获得一个对象。更改状态类型不是一个好习惯。您应该将 data 状态保留为数组或对象。

考虑到您将其保留为一个数组，您需要在setData 中使用一个数组。例如。

comm && Array.isArray(comm.comments) && setData(comm.comments);

至于你的Comments 组件，你应该考虑期待一个数组而不是一个对象。

例如

function Comments(data) {
    return (
        <div>
            {data.map((c) => (
                <Comment key={c.id} />
            ))}
        </div>
    );
}

export default Comments;

【讨论】：