Question

我对React Hooks中useEffect和setState的正确用法有疑问。

这是我的react应用，可获取持久配置和其他一些数据，具体取决于这样的配置：

function App() {
    const [config, setConfig] = useState(null);
    // some other states 

    useEffect(() => {
        const fetchData = () => {
            axios.get("/path/to/config").then(response => {
                if (response.status === 200) {
                    return response.data
                }
            })
                .then(data => {
                    setConfig(data.config);
                    // set some other states
                })
                .catch(error => {
                    console.log("Error:" + error);
                })
        }
        fetchData();
    }, [config]);

    return (
        <div >
            ...
        </div>
    );
}

如果我运行此应用程序，则第一次调用useEffect会立即被两次调用，然后是第二次，因为在axios获取成功函数中调用了setConfig(data.config);。

用户可以更改在另一个请求中完成的自己的配置。如果他愿意，在状态配置更改后，我可以通过此useEffect函数重新加载配置和其他取决于配置的数据。

现在，由于在我读过的地方的react钩子中没有setstate回调，我应该将useEffect与依赖项数组中的状态变量一起使用。

如何防止一开始就两次调用useEffect？

我觉得自己做错了。预先谢谢你

Answer 1

您需要在useEffect中添加一个if条件，因为useEffect在默认情况下是在首次渲染时调用的。

limited_punc = [char for char in string.punctuation if char in "@?&#!^_"]
nopunc = [char for char in text if char not in limited_punc]

在useEffect中将Hook设置状态与依赖项数组中的状态进行反应

1 个答案: