使用 useState 和 Axios (React JS) 保存 api 对 State 的响应

Question

我在尝试保存到 State 和 axios API 调用时遇到问题。 我已经尝试过useState set 方法不立即反映更改的答案和许多其他方法，但我无法保存 state。 这不是重复的，因为我已经尝试了接受的答案和下面的答案，但它仍然不起作用。 这是（相当简单的）组件。 任何帮助将不胜感激

export const Home = () => {
    const [widgets, setWidgets] = useState([]);
    useEffect(() => {
        axios
            .get('/call-to-api')
            .then((response) => {
                const data = response.data;
                console.log(data); // returns correctly filled array
                setWidgets(widgets, data);
                console.log(widgets); // returns '[]'
            });
    }, []); // If I set 'widgets' here, my endpoint gets spammed
    return (
        <Fragment>
            {/* {widgets.map((widget) => { // commented because it fails
                <div>{widget.name}</div>;
            })} */}
        </Fragment>
    );
};

Answer 1

欢迎来到stackoverflow，首先设置调用不正确，您必须使用扩展运算符将数组组合为一个，因此将其更改为setWidgets([...widgets, ...data]); 是正确的（我假设widgets和data都是数组）

二、反应state不会同步变化

        .then((response) => {
            const data = response.data;
            console.log(data); // returns correctly filled array
            setWidgets(widgets, data);
            console.log(widgets); // <--- this will output the old state since the setWidgets above won't do it's work till the next re-render

所以为了听 state 改变你必须使用useEffect钩子

useEffect(() => {

   console.log("Changed Widgets: ", widgets)

}, [widgets])

这将随时控制台记录小部件更改

完整的代码将如下所示

export const Home = () => {
    const [widgets, setWidgets] = useState([]);
    useEffect(() => {
        axios
            .get('/call-to-api')
            .then((response) => {
                const data = response.data;
                setWidgets([...widgets, ...data])
            });
    }, []); 

    
    useEffect(() => {

        console.log("Changed Widgets: ", widgets)

    }, [widgets])



    return (
        <Fragment>
            {/* {widgets.map((widget) => { // commented because it fails
                <div>{widget.name}</div>;
            })} */}
        </Fragment>
    );
};

Answer 2

尝试：

setWidgets(data);

而不是

setWidgets(widgets, data);

Answer 3

您的 widgets.map() 可能会失败，因为在渲染组件时 map 没有太多内容。

为了清楚起见，您应该使用这样的条件更新它：

widgets.length>0 ? widgets.map(...) : <div>No results</div>

您对 setWidgets() 的调用应该只接受一个参数，即数据：

setWidgets(data)

或者，如果您想合并 arrays 使用扩展运算符（但您需要将小部件作为依赖项添加到 useEffect 依赖项数组。

setWidgets(...widgets, ...data)

您可能还必须将 setWidgets 挂钩 function 提供给 useEffect 依赖数组。

让我知道这是否有帮助..