如何在 promise 中设置 react hook 的值？

Posted 2021-03-19

我从承诺中获取了一个数据，我想把它设置在react hook中，它确实是这样做了，但它会产生无限的请求，并重新渲染页面，我还想让一些特定的唯一数据来填充。

const [rows, setRows] = useState([]);
useEffect(() => {
    async function fetchData() {
        myEmploiList({
            user: user.id
        }).then((data) => {
            //setRows(data);
            const newData = [];
            data.forEach((item, index) => {
                newData[index] = {
                    id: item._id,
                    name: item.name,
                    society: item.society
                };
                setRows(newData);
            });
        });
    }
    fetchData();
});

答案

你应该添加依赖关系到你的 useEffect 钩。这是这个钩子的第二个论点。

useEffect(() => {
// your code
}, [deps]);

deps解释。

• 无值：每次组件渲染时都会执行效果。
• []：只在组件第一次渲染时执行效果。
• value1, value2, ...]: 如果任何值发生变化，将执行效果。

如需进一步阅读，我强烈推荐 本博文.

另一答案

移动 setRows 嘑 forEach 循环并包括 user.id 到依赖关系数组中

const [rows, setRows] = useState([]);
useEffect(() => {
    async function fetchData() {
        myEmploiList({
            user: user.id
        }).then((data) => {
            //setRows(data);
            const newData = [];
            data.forEach((item, index) => {
                newData[index] = {
                    id: item._id,
                    name: item.name,
                    society: item.society
                };
            });
            setRows(newData);
        });
    }
    fetchData();
}, [user.id]);