Arrays 更新react钩子中对象列表的元素。将数组绑定到选择控件列表

和两个组成部分：

function ExamenAplicado({alternativas}) {

     const [alternativas, setAlternativas] = useState([{pregunta: 1, alternativa: 0},{pregunta: 2, alternativa: 0},{pregunta: 3, alternativa: 0},{pregunta: 4, alternativa: 0},{pregunta: 5, alternativa: 0}]);

     const handleChange = (e) => {
          setAlternativas({
              ...alternativas,
              [e.target.name] : e.target.value
          })
     }

     return (
        <div className="container my-5">
            <div className="row">
                {alternativas.map(x => ( <ExamenRespuesta key={x.pregunta} numeroPregunta={x.pregunta} handleChange={handleChange} /> ))}
            </div>
        </div>
    )
}


function ExamenRespuesta({numeroPregunta, handleChange}) {
    return(
        <div>
            pregunta {numeroPregunta}: 
            <select id={numeroPregunta} name={numeroPregunta} onChange={handleChange} className="form-control">
                <option value="0">vacio</option>    
                <option value="1">a</option>    
                <option value="2">b</option>
                <option value="3">c</option>
                <option value="4">d</option>
                <option value="5">e</option>
            </select>
        </div>
    )
}

---

请帮忙。我需要了解如何实现此功能。

如果您可以控制

alternativas

的数据结构，则可以将其作为一个对象，其中

pregunta

是关键，

alternativa

是值。然后您的

handleChange

函数将按预期工作

如果

alternativas

必须是代码中显示的对象数组，则可以使用

array.prototype.map

创建数组的更新副本：

const handleChange=（e）=>{
setAlternativas(
alternativas.map（value=>value.pregunta==e.target.name
？{…值，可选a:e.target.value}
：价值）；
}

如前所述，如果您可以将

alternativas

更改为对象，则可能更易于使用

否则你可以这样做

  const handleChange = (e) => {
    const actualSelecciónIndice = alternativas.findIndex(el => {
      return el.pregunta === Number(e.target.name)
    })

    let nuevaAlternativas = [...alternativas]

    if(actualSelecciónIndice) {
      nuevaAlternativas[actualSelecciónIndice].alternativa = Number(e.target.value)
      setAlternativas(nuevaAlternativas)
    }
  }

不是最优雅的解决方案，但很有效：）

  const handleChange = (e) => {
    const actualSelecciónIndice = alternativas.findIndex(el => {
      return el.pregunta === Number(e.target.name)
    })

    let nuevaAlternativas = [...alternativas]

    if(actualSelecciónIndice) {
      nuevaAlternativas[actualSelecciónIndice].alternativa = Number(e.target.value)
      setAlternativas(nuevaAlternativas)
    }
  }