如何在javascript映射函数中动态呈现信息

Question

所以我有一个有趣的问题。我有一个 JavaScript 表（它位于一个 React JS 组件中）。我正在使用映射函数来循环遍历存储在 props 中的数组。数组中每个元素的值用于为选择下拉菜单创建选项标签。请看以下代码：

<table className="addNewTransactionTable">
  <tr>
    <th>
      <label>#</label>
    </th>
    <th>
      <label>Account</label>
    </th>
    <th>
      <label>Description</label>
    </th>
    <th>
      <label>Debit</label>
    </th>
    <th>
      <label>Credit</label>
    </th>
    <th>
      <label>Name</label>
    </th>
  </tr>
  {rows.map((item) => (
    <tr>
      <td>
        <input type="text" placeholder={item}></input>
      </td>
      <td>
        <select name="accountName" value={this.state.accountName} onChange={this.onChangeAccount}>
          <option>--Please Select--</option>
          {this.props.accountArray.map((index) => (
            <option>{index.name}</option>
          ))}
        </select>
      </td>
      <td>
        <input type="text" placeholder="Description"></input>
      </td>
      <td>
        <input type="text" placeholder="Debit"></input>
      </td>
      <td>
        <input type="text" placeholder="Credit"></input>
      </td>
      <td>
        <input type="text" placeholder="Name"></input>
      </td>
    </tr>
  ))}
</table>

这是创建一行输入值，具体取决于用户选择的行数。请参阅以下图片以供参考： 第一个映射函数表示用户选择的行数，第二个映射函数表示每个下拉菜单的所有选项（这是生成的行中的一个字段）。我的问题是下拉菜单。当我在其中一行中选择一个选项时，它会更改所有行的下拉菜单中的选择。这是因为 value 属性指向同一个状态值。有没有办法可以为映射函数的每个循环动态更改状态？我的一个想法是使this.state.accountName 成为一个数组，并在每个循环中更改它指向的元素。但是，我对映射功能不是很熟悉。为了创建动态状态，这是否可能？如果没有，还有其他方法可以做到这一点吗？

Answer 1

非常简单的解决方案，只需为每个选项提供 key={}

 this.props.accountArray.map((item, index)=> <option key={index}>{item.name}</option>)) }

在 onAccountChange 方法中，你可以这样做

onAccountChange = (event,) => {
  let value = event.target.value;
let selectedIndex = event.target.options.selectedIndex;
  this.setState({ ...state, type[selectedIndex]: value)}
}

做这样的事情要么把它保存在一个对象中