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')
);

---

看起来我的组件没有重新渲染。为什么呢

您的问题很可能是您试图直接改变状态。在

onChange

函数中，您应该确保不要尝试对其进行变异

function onChange(index, event) {
  const newValues = values.map((value, i) => {
    return i === index ? event.target.value : value;
  });
  setValues(newValues);
}

---

您的问题很可能是您试图直接改变状态。在

onChange

函数中，您应该确保不要尝试对其进行变异

function onChange(index, event) {
  const newValues = values.map((value, i) => {
    return i === index ? event.target.value : value;
  });
  setValues(newValues);
}

---

正如@Nick提到的，问题是我直接改变了状态本身。我最终采用了以下方法（而不是Nick的有效方法）：

---

正如@Nick提到的，问题是我直接改变了状态本身。我最终采用了以下方法（而不是Nick的有效方法）：

function onChange(index, event) {
  const newValues = [...values];
  newValues[index] = event.target.value;
  setValues(newValues);
}