运行更新对象中的值后的函数

Question

我有一个包含多个字段的对象列表。我想在用户输入工厂位置后进行 api 调用。

我想过使用 useEffect，但那行不通，因为为了进行 api 调用，我需要两个值 - id 和 index，而且（据我所知）你可以' t 在useEffect中传递参数。我是正常做的（你可以在下面的代码中看到），而不是使用 useEffect，但这不起作用，因为植物位置是空的（因为在更新植物位置之前有一点延迟）。

那么，工厂位置更新后如何拨打电话？

    //the plants object
    const [plants, setPlants] = useState([
        {
            name: 'Plant 1',
            id: uuidv4(),
            location: '',
            isOffshore: false,
            coords: {},
            country: '',
        }
    ])

    const handlePlantLocChange = (id, index, value) => {
        setPlants(
            plants.map(plant => 
                plant.id === id
                ? {...plant, location: value}
                : plant
            )
        )
        handler(id, index);
    }

    // this makes the api call. 
    //I need to pass id and index to this function 
    //no matter what, hence why I can't use useEffect
    const getCoords = (id, index) => {
        axios.get('http://localhost:3001/endpoints/coords', {
            params: {
                location: plants[index].location
            }
        }).then((response) => {
            if(response.status === 200) {
                handlePlantInfoChange(id, PlantInfo.COORD, response.data)
            }
        })
    }

    const handler = useCallback(debounce(getCoords, 4000), []);

    return (
        <div className='plant-inps-wrapper'>
            {
                plants.map((item, idx) => {
                    return (
                        <div key={item.id} className="org-input-wrapper">
                            <input placeholder={`${item.isOffshore ? 'Offshore' : 'Plant ' + (idx+1) + ' location'}`} onChange={(e) => handlePlantLocChange(item.id, idx, e.target.value)} value={item.isOffshore ? 'Offshore' : item.location} disabled={item.isOffshore} className="org-input smaller-input"/>
                        </div>
                     )
                })
            }
        </div>
    )

Answer 1

请使用带依赖数组的 useEffect 钩子。

如下所示：

useEffect(() => {
   // You can call API here because When plant state updated this will be called.
}, [plants]);

Answer 2

你可以像这样将 props 和 state 传递给 useEffect：

useEffect(() => {
 getCoords(id, index);

 return () => getCoords(id, index);
}, [id, index])

运行更新对象中的值后的函数

run function once a value in an object has been updated

reactjs

use-effect

运行 更新对象中的值后的函数

run function once a value in an object has been updated

reactjs

use-effect

运行更新对象中的值后的函数