React - onChange 处理程序的动态参考

Question

我正在使用 Array.map 在表格中动态创建选择元素，并将每个选择元素设置为受控输入。

我正在尝试使用我的功能组件中的 refs 动态更改值/状态以访问状态并更新元素的值。为此，我在创建元素时为每个 select 元素创建一个 ref，并将这些 ref 存储在 refs 数组中。

然后我想在 onChange 事件中使用设置为 .map 迭代的 elements 键访问这些引用 - 但我很难访问 elements 键，请参见下面的代码：

  {state.profitFsHeaders.map((item:any, i:any)=>{
                const newRef:any = createRef()
                rowRefs.push(newRef)

  return (<tr key={i}>
                <td className={classes.tableCell} ref={newRef}>
                {item}
               </td>
               <td className={classes.tableCell}>
                 <select key={i} value={state.mappedPlRows[rowRefs[i].current.innerText]} onChange={(e)=> {handleChange(e,item)}}>

对 i 变量的引用未定义 -

{state.mappedPlRows[rowRefs[i].current.innerText

有谁知道我如何为每个元素保留这个？

Answer 1

 state.mappedPlRows

可能不包含值或内部文本的值可能未定义。