反应获取数据并相应地设置状态不起作用

Question

在下面的代码中，settings 变量没有被设置。我确实在 console.log 之后检查过 setSettings 而且我还验证了使用变量的组件正在接收默认的 {} 值。提取本身是正确的，我在浏览器的控制台中尝试过，我在“网络”选项卡中看到了 json。

我需要在第一次渲染时完成一次提取。

你能看看吗？我在这上面花了很多时间，我想知道我做错了什么。谢谢！

    const [settings, setSettings] = React.useState({});

    function fetchSettings() {
        fetch("MYAPIENDPOINT/settings", {
            method: "GET",
            credentials: 'include',
            accept: 'application/json',
        })
        .then(response => {
            if (response.ok) {
                return response.json();
            }
            throw response;
        })
        .then((data) => {
            setSettings(data);
        })
        .catch(error => {console.log(error);});

    }

    React.useEffect(
        fetchSettings(),
        [settings]
    );

EDIT 使用 settings 变量

显示组件

    ...
    <div id="Grid" style={{ height: "700px" }}>
        {settings && <GenericGrid settings={settings} />}
    </div>

Answer 1

useEffect 接受 2 个参数：回调和依赖数组。

正确的语法是：

useEffect(() => {
   function fetchSettings(){
      ...
   }

   fetchSettings();
}, [])

如果您希望回调只触发一次，请将依赖项数组留空。另外最好在回调中定义 fetchSettings 函数，这样它就不会在每次渲染时重新创建。

反应获取数据并相应地设置状态不起作用

React fetch data and set state accordingly doesn't work

fetch

reactjs

react-hooks

use-effect