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

Question 1

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

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)

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

arrays reactjs key warnings whitespace

1

Concorde 10 Апр 2020 в 13:05

1

Не могли бы вы опубликовать код карты вашего резюме?

–

HermitCrab

10 Апр 2020 в 13:14

Выложил код карты.

–

Concorde

11 Апр 2020 в 02:00

Answer

Я думаю, вы ошибались, когда сопоставляли данные:

Первый прогноз:

Предупреждение: у каждого ребенка в списке должна быть уникальная «ключевая» опора.

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

Например:

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>

0

Mohammad Oftadeh 11 Апр 2020 в 08:27

Что касается пробелов, которые уже устранены, спасибо. Для ключа я все еще сталкиваюсь с предупреждениями, я разместил код карты.

–

Concorde

11 Апр 2020 в 01:59

@Конкорд. Ok. Я сделал необходимые изменения в разделе редактирования. Пожалуйста, дайте вам зеленый чек и оценку, если это поможет. благодарен

–

Mohammad Oftadeh

11 Апр 2020 в 08:30

Question 2

Я думаю, вы ошибались, когда сопоставляли данные:

Первый прогноз:

Предупреждение: у каждого ребенка в списке должна быть уникальная «ключевая» опора.

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

Например:

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>

0

Mohammad Oftadeh 11 Апр 2020 в 08:27

Что касается пробелов, которые уже устранены, спасибо. Для ключа я все еще сталкиваюсь с предупреждениями, я разместил код карты.

–

Concorde

11 Апр 2020 в 01:59

@Конкорд. Ok. Я сделал необходимые изменения в разделе редактирования. Пожалуйста, дайте вам зеленый чек и оценку, если это поможет. благодарен

–

Mohammad Oftadeh

11 Апр 2020 в 08:30

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

1 ответ

Похожие вопросы

Новые вопросы

arrays