javascript - 如何在 react 中以两种方式绑定(bind)数据输入？

Question

考虑到我有这样的数据:

const[specs, setSpecs] = useState(['motherboard', 'ram', 'mouse'])

我需要以某种方式将其绑定(bind)到我的输入。
我正在尝试这样的事情:

const handleOnChange = (e, spec, index) => {
  let data = specs;
  data[index] = e.target.value;
  setSpecs(data)
}

它确实在数组中更新，但它没有反射(reflect)在输入框中

{
  specs.map((spec, index) => {
    return <Row>
      <Col>
        <Form.Control key={spec} value={spec} 
          onChange={(e) => handleOnChange(e, spec, index)} type="text" />
        <br/>        
      </Col>
    </Row>
}

Answer 1

最后我自己解决了。

    const handleOnChange = (e, spec, index) => {  
        let data = [...specs];
        data[index] = e.target.value;
        setSpecs(data);
}

我没有得到我的原因是改变了状态