Question

我在React中有一个表（对象数组）。我每行都有一个输入框/按钮。目前，我在反应本地状态（输入框/按钮）中使用索引。但是，'index'会在过滤时导致混乱的表格。阅读链接https://www.menubar.io/react-keys-index/并尝试使用“密钥”。有人可以帮助使用键访问输入框和按钮数组吗？我的代码如下：

 companies.map((company,index)=>{
 return (
 <tr key={company.id}>
   <td onClick={this.props.onClick.bind(this, company)}></td>       
   <td>{company.vacancy}</td>     
   <td key={company.id}>            
         <p><input type="text" value={this.state.company.messages[index] || ''} name={this.state.company.messages[index]} onChange={this.handleMessageChange.bind(this,company,index)}/></p>
         <p><button type="button" onClick={() => this.sendSMS(company,index)}>SMS</button></p>
  </td>                          
 </tr>
   );
  })

我将companyId作为唯一价值。

Answer 1

由于companyId是唯一的，因此可以用作密钥。

在您的示例中，密钥应该在tr中使用而不是在内部td

中

<tr key={company.id}> - 正确使用
<td key={company.id}> - 使用不正确

键仅在周围数组的上下文中有意义。

您可以参考https://reactjs.org/docs/lists-and-keys.html中的 使用键提取组件 ，其中包含错误且正确的密钥用法

您可以在Understanding unique keys for array children in React.js中查询阵列中的任何操作（在您的情况下为过滤器）。

Answer 2

您不应该使用数组来存储可以重新排列的项的值，因为那时您还必须重新排列数组以保持正确的项到值关系。

改为使用对象：

<input 
  type="text"
  value={this.state.company.messages[company.id] || ''}
  name={this.state.company.messages[company.id]}
  onChange={this.handleMessageChange.bind(this, company)}
/>

您在构造函数中的状态看起来像是：

this.state = {
  company: {
    messages: {}
  }
};

这样，每家公司的邮件都存储为：

company: {
 messages: {
   someCompanyId: "blah blah",
   anotherCompanyId: "blah",
   ...
 }
}

这使得值的存储与索引和顺序无关。

在React中使用'keys'来渲染输入框/按钮的数组

2 个答案: