为什么我的状态在获取数据后没有更新？

Question

各位早上好,，

我刚完成React的培训，我想做一个项目来练习。首先，我只是在firebase数据库中发布数据。然后，我想使用钩子（useState和useEffect）获取数据并将其显示在react组件中。

问题是，在使用axios获取数据后，我最终陷入了经典的无限循环陷阱，但我不知道如何使用依赖性来阻止它。

请查找以下代码：

import React, {useState} from 'react'
import {useEffect} from 'react'

import classes from './Incomes.module.css'
import axios from '../../../axios'

import Button from '../../UI/Button/Button'
import Input from '../../UI/Input/Input'

const Incomes = (props) => {

const [inputValue, setInputValue] = useState('');
const [fetchedTypes, setFetchedTypes] = useState([]);

const onClickHandler = () => {
    const type = {type: inputValue}
    axios.post('/types.json', type)
    .then(response => {
        alert('ok c good');
    })
    .catch(error => console.log(error))
}

const onChangeHandler = (event) => {
    setInputValue(event.target.value)
}

useEffect(() => {
    axios.get('/types.json')
    .then(response => {
        let types = []
        for(let key in response.data) {
            types.push({...response.data[key], id: key})
        }
        console.log('types : ', types)
        setFetchedTypes(prevFetchedTypes => [...prevFetchedTypes, types])
    })
    .catch(error => console.log(error))
    console.log('fetchedtypes', fetchedTypes)
}, [fetchedTypes])

    return (
        <div className={classes.Incomes}>
            <h2>Paramètres des entrées</h2>
            <h3>Ajouter un type de revenu</h3>
            <Input type="text" disabled={false} change={onChangeHandler} placeholder="Nom du champ"></Input>
            <Button onClick={onClickHandler} type="Normal" clicked={onClickHandler}>Ajouter</Button>
            <h3>Liste des types de revenus disponibles</h3>
        </div>
    )
}

export default Incomes;

当我使用控制台日志类型时，数据是正确的。但当我控制台记录fetchedTypes时，它是一个空数组。

我找到了这篇文章，但它也不起作用：React-useffect-infinite-loop-fetch-data-axios

我不确定这是否是我使用use效果的方式或更新状态的方式的问题，或者两者兼而有之。

谢谢你的帮助

祝您今天过得愉快

Answer 1

你得到一个无限循环的原因是因为你的使用效果和两个原因。

• 我假设finchedTypes不是一个基元，而是一些对象/数组，所以每次都会不同。不要把它和use效果一起使用。如果您想依赖于对象，请使用肯特的DeepCompare效应，但您不需要它。
• 无限循环的第二个也是主要原因是这样的语句：

    setFetchedTypes(prevFetchedTypes => [...prevFetchedTypes, types])

您的use效应正在用上面的行更新pechedTypes，但它也意味着在pechedTypes更改时运行。因此，使用效果会更新它，因为它是一个已经更改的依赖项，所以使用效果会再次运行，导致无限循环。

一种可能的解决方案：如果要在加载组件时提取数据，请将useEffect更改为：

useEffect(() => {
    axios.get('/types.json')
    .then(response => {
        let types = []
        for(let key in response.data) {
            types.push({...response.data[key], id: key})
        }
        console.log('types : ', types)
        setFetchedTypes(types)
    })
    .catch(error => console.log(error))
    console.log('fetchedtypes', fetchedTypes)
}, [])

• 忽略任何棉绒警告。一个空的依赖数组意味着当组件呈现时，它只运行一次。

但是由于您有一个点击处理程序，我假设您希望在POST请求之后更新数据。如果onClickHandler返回新创建的类型，请执行以下操作：

const onClickHandler = () => {
    const type = {type: inputValue}
    axios.post('/types.json', type)
    .then(response => {
        const newType = response.data;
        const updatedTypes = [...types, newType]
        setFetchedTypes(updatedTypes)
    })
    .catch(error => console.log(error))
}

注意：我不知道你的类型的结构，所以我在假设中工作，但这就是我的想法