使用 React Hooks 更新值

Question

我是否正确更新了“水果”？我认为 Fruits.push('something') 会触发 useEffect 钩子？或者使用 setFruits 会导致重新渲染？

const Fruits = () => {
const [fruitInput, setFruitInput] = useState("")
const [fruits, setFruits] = useState(['Apple', 'Orange'])

const addFruit = fruit => {
   console.log('addFruit', fruit)
   fruits.push(fruit)
   setFruits(fruits)
}

useEffect(() => {
   console.log('fruits was updated', fruits)
 }, [fruits])

 return (
 <>
    <ul>{fruits.map((fruit, index) => <li key={index}>{fruit}</li>)}</ul>
    <input type="text" onChange={ e => setFruitInput(e.target.value) } value={fruitInput} />
    <button onClick={() => addFruit(fruitInput)}>Add Fruit</button>
 </>
)
}

Answer 1

你fruits在原地改变数组，所以 React 看不到它的变化，也不会触发渲染。将该项目添加到新创建的数组中：

const addFruit = fruit => {
   console.log('addFruit', fruit)
   setFruits([...fruits, fruit])
}