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

Question

和两个组件：

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>
)
}

我不知道如何将绑定到数组的每个元素。因此，当您更改select的值时；alternativa"；领域

其思想是，数组的pregunta值链接到select的name属性，alternativa值链接至select的value属性。

pregunta ~~ [select control].name
alternativa ~~ [select control].value

请帮忙。我需要一个如何实现这一功能的想法。

Answer 1

就像parktomatomi提到的那样，如果可以将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)
}
}

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

Answer 2

如果您可以控制alternativas的数据结构，您可以使其成为一个对象，其中pregunta是键，alternativa是值。那么handleChange函数将按预期工作。

如果alternativas必须是代码中显示的对象数组，则可以使用Array.prototype.map:创建数组的更新副本

const handleChange = (e) => {
setAlternativas(
alternativas.map(value => value.pregunta == e.target.name
? { ...value, alternativa: e.target.value }
: value));
}