Предупреждения относительно предоставления ключа в функции карты, но у меня уже есть и предупреждения относительно пробелов - PullRequest
Новая
       7

Предупреждения относительно предоставления ключа в функции карты, но у меня уже есть и предупреждения относительно пробелов

0 голосов
/ 10 апреля 2020

Я сталкиваюсь с этими предупреждениями, и мне нужно их устранить. 

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>

1 Ответ

1 голос
/ 10 апреля 2020

Я полагаю, что вы ошиблись при сопоставлении данных:

Первое предсказание:

Предупреждение: каждый дочерний элемент в списке должен иметь уникальный ключ "prop.

Вы должны установить значение ключа при отображении:

, например: 

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