reactjs - 使用 React Hooks 更新值
问题描述
我是否正确更新了“水果”?我认为 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>
</>
)
}
解决方案
你fruits
在原地改变数组,所以 React 看不到它的变化,也不会触发渲染。将项目添加到新创建的数组中:
const addFruit = fruit => {
console.log('addFruit', fruit)
setFruits([...fruits, fruit])
}
推荐阅读
- android - Java 8“可选”不好的做法?
- angular - Angular Nativescript 使用的版本?
- python-3.x - 安装“Statsmodels”时出错
- python - 使用 cpu 作为配置设备时使用 python3.6 在 linux 中的 theano 导入错误
- css - 将垂直滚动条添加到 shinyjs 下拉按钮 - 闪亮
- unix - 通过 plsql 或 unix shell 脚本将文件发送到 zip 文件的代码
- python - 用 Python 将浮点数从 MySQL 读入字典
- php - Laravel 自定义登录/密码重置逻辑
- c++ - 在 C++ 中为单个文件使用多个文件指针
- react-native - 使用 React 本机打开邮件中的链接时,与带有 sendGrid 集成问题的 Brnach.IO 进行深度链接,因为未定义传递参数