关于在地图功能中提供键的警告，但我已经有一个关于空格的警告

Question

我遇到了这些警告，我需要消除它们。

Warning: Each child in a list should have a unique "key" prop.
Check the render method of `Summary`. 

    in tr (at Summary.js:46)
    in Summary (at Main.js:323)
    in StepForm (at App.js:8)
    in div (at App.js:7)
    in div (at App.js:6)
    in App (at src/index.js:9)
    in StrictMode (at src/index.js:8)

Warning: validateDOMNesting(...): Whitespace text nodes cannot appear as a child of <tr>. Make sure you don't have any extra whitespace between tags on each line of your source code.

    in tr (at Summary.js:46)
    in tbody (at Summary.js:44)
    in table (created by ForwardRef)
    in ForwardRef (at Summary.js:32)
    in Summary (at Main.js:323)
    in StepForm (at App.js:8)
    in div (at App.js:7)
    in div (at App.js:6)
    in App (at src/index.js:9)
    in StrictMode (at src/index.js:8)

2020 年 4 月 11 日 关于密钥，我已经将它包含在我的代码中，但仍然收到警告消息，请参见下面的代码：

<tbody>
    {postArray.map(postArr=>
        <tr><td key = {postArr.txNumber}></td>
            <td>{postArr.accountNumber}</td>
            <td>{postArr.amount}</td>
            <td>{postArr.qNumber}</td>
            <td>{postArr.txNumber}</td>
            {/* <td><button >Edit</button></td> */}
            <td><button className="txnbuttonsmall" onClick={()=>this.props.editOne(postArr.txNumber)}>Edit</button></td>
            <td><button className="txnbuttonsmall" onClick={()=>this.props.deleteTx(postArr.txNumber)}>Delete</button></td>
            </tr>)}
</tbody>

Answer 1

我猜你映射数据时错了：

第一个预测：

警告：列表中的每个孩子都应该有一个唯一的“key”属性。

映射时必须设置键值：

例如：

cols.map(colData => {
   return <td key={colData.key}>{item[colData.key]}</td>;
});

第二次预测：

警告：validateDOMNesting(...)：空白文本节点不能出现 作为一个孩子。确保您没有任何额外的空格 源代码每一行的标签之间。

您需要清除多余的可用空间 (tr & td)

例如：

return <tr key={item.id}> {cells} </tr>;

到

return <tr key={item.id}>{cells}</tr>;

最后，一起：

    ...

    if (this.props.rows.length > 0) {
              return data.map(item => {
                  var cells = cols.map(colData => {
                      return <td key={colData.key}>{item[colData.key]}</td>;
                  });
                  return <tr key={item.id}>{cells}</tr>;
              });
        }

    ...

已编辑：

需要为父tr设置key值并清除多余的空闲空间

<tr key={postArr.txNumber}>

而你必须改变：

<tbody>
    {postArray.map(postArr=>
        <tr><td key = {postArr.txNumber}></td>
            <td>{postArr.accountNumber}</td>
            <td>{postArr.amount}</td>
            <td>{postArr.qNumber}</td>
            <td>{postArr.txNumber}</td>
            {/* <td><button >Edit</button></td> */}
            <td><button className="txnbuttonsmall" onClick={()=>this.props.editOne(postArr.txNumber)}>Edit</button></td>
            <td><button className="txnbuttonsmall" onClick={()=>this.props.deleteTx(postArr.txNumber)}>Delete</button></td>
            </tr>)}
</tbody>

到：

<tbody>
    {postArray.map(postArr=> (
        <tr key={postArr.txNumber}>
            <td>{postArr.accountNumber}</td>
            <td>{postArr.amount}</td>
            <td>{postArr.qNumber}</td>
            <td>{postArr.txNumber}</td>
            {/* <td><button >Edit</button></td> */}
            <td><button className="txnbuttonsmall" onClick={()=>this.props.editOne(postArr.txNumber)}>Edit</button></td>
            <td><button className="txnbuttonsmall" onClick={()=>this.props.deleteTx(postArr.txNumber)}>Delete</button></td>
            </tr>
   ))}
</tbody>