Reactjs 如何获取数据并在useffect（）中使用它？

我试图从API获取数据并设置数据的状态，但是当我在子组件中使用数据时，我得到一个

[未处理的承诺拒绝：TypeError:null不是对象（评估'data.name'）]

警告

这是我要做的事情的要点。有人知道为什么会发生这种情况吗？我认为这是因为没有从API接收数据。我尝试添加一个“isLoading”状态，只有当它为false时才返回ChildComponent，但我仍然得到相同的警告（这可能是因为setNewProp in useEffect在从API接收数据时没有更新）

constparentcomponent=（props）=>{
const[data，setData]=useState（null）；
const[newProp，setNewProp]=useState（）；
const fetchData=async（）=>{
新建DataService.retrieveData（）。然后（（响应）=>{
setData（响应）；
}
}
useffect（（）=>{
fetchData（）；
setNewProp（{data，…props}）；
}, []);
返回(
);
}

看起来您可能错过了

useffect（）

中需要的

wait

，以使代码等待，直到提取完成：

之前：

useffect（（）=>{
fetchData（）；
setNewProp（{data，…props}）；
}, []);

之后：

useffect（（）=>{
（异步（）=>{
等待获取数据（）；
setNewProp（{data，…props}）；
})();
}, []);

请注意，

useffect（）

不支持异步函数（因为它需要返回值为清理函数或未定义。例如，请参阅

但更好的可能是：

const[data，setData]=useState（null）；
const fetchData=async（）=>{
新建DataService.retrieveData（）。然后（（响应）=>{
setData（响应）；
}
}
fetchData（）；
如果（数据）{
const newProp={data，…props}；
}

看起来您可能错过了

useffect（）

中需要的

wait

，以使代码等待，直到提取完成：

之前：

useffect（（）=>{
fetchData（）；
setNewProp（{data，…props}）；
}, []);

之后：

useffect（（）=>{
（异步（）=>{
等待获取数据（）；
setNewProp（{data，…props}）；
})();
}, []);

请注意，

useffect（）

不支持异步函数（因为它需要返回值为清理函数或未定义。例如，请参阅

但更好的可能是：

const[data，setData]=useState（null）；
const fetchData=async（）=>{
新建DataService.retrieveData（）。然后（（响应）=>{
setData（响应）；
}
}
fetchData（）；
如果（数据）{
const newProp={data，…props}；
}

您不能在useEffect生命周期事件中使用异步函数。作为一个好的解决方案，我建议充分利用useEffect挂钩，并将其用作更新数据的效果

const ParentComponent = (props) => {
        const [data, setData] = useState(null);
        const [newProp, setNewProp] = useState();

        const fetchData = async () => {
                new DataService.retrieveData().then((response) => {
                        setData(response);
                }
        }

        useEffect(() => {
                fetchData();
        }, []);

        useEffect(() => {
                setNewProp({ data, ...props });
        }, [data]);

        return (
                <ChildComponent newProp={newProp} />

        );
}

---

不能在useEffect生命周期事件中使用异步函数。作为一个好的解决方案，我建议充分利用useEffect挂钩，并将其用作更新数据的效果

const ParentComponent = (props) => {
        const [data, setData] = useState(null);
        const [newProp, setNewProp] = useState();

        const fetchData = async () => {
                new DataService.retrieveData().then((response) => {
                        setData(response);
                }
        }

        useEffect(() => {
                fetchData();
        }, []);

        useEffect(() => {
                setNewProp({ data, ...props });
        }, [data]);

        return (
                <ChildComponent newProp={newProp} />

        );
}

---

在代码中，首先调用fetchData函数，该函数在完成时调用useState钩子。由于useState钩子异步工作，因此状态

data

不会立即更改

useEffect(() => {
    fetchData();                     // Called setData()
    setNewProp({ data, ...props });  // At this point, data hasn't changed yet.
}, []);

因此，您可以再次使用useEffect钩子来监视

数据

状态中的更改。然后您应该设置

newProp

的新状态

useEffect(() => {
    (async () => {
        await fetchData();
    })();
}, []);    


useEffect(() => {
    setNewProp({...props, data });
}, [data]);

---

在代码中，首先调用fetchData函数，该函数在完成时调用useState钩子。由于useState钩子异步工作，因此状态

data

不会立即更改

useEffect(() => {
    fetchData();                     // Called setData()
    setNewProp({ data, ...props });  // At this point, data hasn't changed yet.
}, []);

因此，您可以再次使用useEffect钩子来监视

数据

状态中的更改。然后您应该设置

newProp

的新状态

useEffect(() => {
    (async () => {
        await fetchData();
    })();
}, []);    


useEffect(() => {
    setNewProp({...props, data });
}, [data]);

---

您没有调用fetchData Anywhere数据服务。retrieveData（）调用fetch。我们有单独的文件专门用于进行API调用，并将其导入组件。如何？这意味着一个循环/无限调用。正如所写，

fetchData

calls

DataService.retrieveData（）

，而不是相反。哦，我误读了这个问题。让我更改操作。在useffect（）中调用了fetchData。您没有在Anywhere调用fetchData DataService.retrieveData（）调用fetch。我们有单独的文件专门用于进行API调用，并将其导入组件。如何？这意味着一个循环/无限调用。正如所写的，

fetchData

调用

DataService.retrieveData（）

，而不是相反。我误解了这个问题。让我更改操作。fetchData在useEffect（）中调用。这样做会导致“无法在异步函数外部使用关键字“wait”错误。在

新数据服务前面添加wait。retrieveData（）

也不会更改任何内容。遗憾的是，最新的更改也不起作用。这样做会导致“无法在异步函数外部使用关键字“wait”错误。在新DataService.retrieveData（）前面添加wait也不会改变任何东西。不幸的是，最新的更改也不起作用。它是正确的，必须使用两个像这样的useEffects，向上投票…是的，我错过了第一个也必须在

useEffect

中。这是正确的。它是正确的，必须使用两个像这样的useEffects，向上投票…是的，我错过了第一个也必须在

useffect

。这是正确的