如何获取数据并在 useEffect() 中使用它？

我正在尝试从 API 获取数据并使用数据设置状态，但是当我在子组件中使用数据时，我得到一个[Unhandled promise rejection: TypeError: null is not an object (evaluating 'data.name')]警告。

这是我正在尝试做的事情的要点。有谁知道为什么会发生这种情况？我认为这是因为没有从 API 接收到数据。我尝试添加“isLoading”状态，并且仅在为 false 时返回 ChildComponent，但我仍然收到相同的警告（这可能是因为 useEffect 中的 setNewProp 在从 API 接收数据时未更新）。

const ParentComponent = (props) => {
        const [data, setData] = useState(null);
        const [newProp, setNewProp] = useState();
        const fetchData = async () => {
                new DataService.retrieveData().then((response) => {
                        setData(response);
                }
        }

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

        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} />

        );
}

我还想指出 useEffect 在第一次渲染之后运行。这意味着您的 ChildComponent 将始终接收“未定义”作为第一个道具，因为没有设置初始值：

const [newProps, setNewProp] = useState(); // initial value comes here to prevent errors