React父组件传map生成的列表props到子组件渲染全量数据报错怎么办

问题根因 #

1. 你从App传递给TextsList的textsList是<li>元素组成的数组，数组本身没有id属性，直接写textsList.id自然会报错。
2. 你当前App.js中的onClick回调函数漏写了闭合花括号，属于语法错误，会直接导致代码无法运行。
3. 你App中生成textsList时直接把整个文本对象放在<li>里，React无法直接渲染普通对象，后续运行也会报错。

修复方案（推荐，组件职责更清晰） #

第一步：修改App.js

• 补全onClick函数的闭合花括号
• 直接将原始的texts数组传递给TextsList组件，不用提前在父组件生成<li>元素，修改对应传参代码：

// App.js 修复后的核心代码
function App() {
  // 其他原有代码保持不变
  const onClick = (e) => {
    e.preventDefault();
    const newTexts = texts.concat({
      id: nextId,
      author: inputAuthor,
      text: inputText,
    });
    setNextId(nextId + 1);
    setTexts(newTexts);
    setInputAuthor("");
    setInputText("");
  }; // 补上这里漏写的花括号

  // 删掉原来的textsList定义，不用提前生成<li>

  return (
    <div className="all">
      <Route path="/" component={Home} />
      <div>
        <Route
          exact
          path="/"
          render={() => <TextsList texts={texts} />} {/* 修改传参，直接传原始数组 */}
        />
      </div>
      {/* 其他原有代码保持不变 */}
    </div>
  );
}

第二步：修改TextsList.jsx

直接在子组件内部遍历texts数组生成列表项，按需渲染你要展示的字段：

import React from "react";
import "./TextsList.css";

const TextList = ({ texts }) => {
  return (
    <div id="TextListContainer">
      <ol>
        {texts.map(item => (
          <li key={item.id}>
            <div>作者：{item.author}</div>
            <div>内容：{item.text}</div>
          </li>
        ))}
      </ol>
    </div>
  );
};

export default TextList;

可选方案（不修改App传参逻辑） #

如果你不想改动App的现有传参逻辑，只需要改两处：

1. 把App中原来生成textsList的代码改成正确的渲染逻辑：

const textsList = texts.map((t) => <li key={t.id}>{t.author}：{t.text}</li>);

2. 把TextsList.jsx中的<ol>{textsList.id}</ol>改成<ol>{textsList}</ol>即可。

内容的提问来源于stack exchange，提问作者hyeonyohwan