javascript - 具有动态数组长度的 React 钩子
问题描述
我有以下虚拟示例:
function App({size}) {
const [values, setValues] = React.useState(Array(size).fill(''));
function onChange(index, event) {
console.log('setting index: ', index)
console.log('to value: ', event.target.value);
values[index] = event.target.value;
setValues(values);
}
console.log('values are');
console.log(values);
const inputs = Array(size).fill().map((_, index) => (
<input
key={`input-${index}`}
value={values[index]}
onChange={e => onChange(index, e)}
/>
));
return (
<React.Fragment>
{inputs}
</React.Fragment>
)
}
ReactDOM.render(
<App size={3} />,
document.getElementById('container')
);
我希望能够传递size
并App
动态获取那么多输入。
当我运行它并输入输入时,我看到
values are
["", "", "", ""]
setting index: 3
to value: s
setting index: 1
to value: e
setting index: 0
to value: f
看起来我的组件没有重新渲染。这是为什么?
解决方案
您的问题很可能是您试图直接改变状态。在你的onChange
函数中,你应该确保不要试图改变它。
function onChange(index, event) {
const newValues = values.map((value, i) => {
return i === index ? event.target.value : value;
});
setValues(newValues);
}
推荐阅读
- flutter - 类型'Null'不是颤振布尔表达式中的'bool'
- mongodb - 如何更改在 ECS 上运行的 mongo 的配置文件
- php - 产品自定义分类术语循环 - 图像的 src 为空
- r - 根据 r 中的其他列对一个列表中的一列的所有值进行分组
- python - 合并两个共享相同列值的数据框
- html - -1 的 tabIndex 是否与没有 tabIndex 相同,还是应该使用 undefined 或 null?
- php - 覆盖“porto”架构中的类
- artifactory - Artifactory 服务器抛出错误:服务不可用
- dictionary - pl/sql中使用数字作为索引的键值映射
- airflow - 在气流传感器中使用 XCom