时间戳

首页 > 解决方案 > 关于在地图功能中提供键的警告，但我已经有一个关于空格的警告

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

问题描述

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

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)

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

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

标签： arraysreactjskeywarningswhitespace

解决方案

我猜你在映射数据时错了：

第一个预测：

警告：列表中的每个孩子都应该有一个唯一的“关键”道具。

映射时必须设置键值：

例如：

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

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

推荐阅读