在下面的示例中，我有一个想要更新的元素（水果）数组，并使用更新后的数组执行其他操作（在本例中保存更新后的列表）。我的理解是重新渲染状态将更新......但它不在这里......或者状态更新和我的操作之间存在延迟。
In the addFruit功能我可以看到“Peach”立即被添加，但控制台来自saveFruits函数仍然显示状态fruit保持不变。我怎样才能更新它以立即使用。 （我知道在这种情况下我可以通过newFruits变量为saveFruits更新但我需要fruits其他地方也将更新）。
请原谅我，因为这是我关于反应异步状态的第一百万个问题，但还有一些东西不适合我。
const { useState } = React;
function ParentComp() {
const[fruits, setFruits] = useState(['Apple', 'Orange', 'Banana', 'Pomegranate', 'Kiwi'])
const addFruit = () => {
let newFruits = Object.assign([], fruits)
newFruits.push('Peach')
setFruits(newFruits)
saveFruits()
}
const saveFruits = () => {
console.log('API req to save fruits.', fruits)
}
return (
<div>
{ fruits.map( (fruit, key) => <div key={key}>{fruit}</div> ) }
<button type="button" onClick={addFruit}>Add Peach</button>
</div>
)
}
ReactDOM.render(<ParentComp />, document.getElementById('root'))
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<div id="root"></div>
您可以尝试使用 useEffect ，只要有更新，它就会给出更新的状态。
useEffect(() => {
saveFruits();
}, [fruits]);
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
