React数组未渲染问题：待办列表组件无内容显示排查

你的代码里存在几个关键问题导致列表无法渲染，以下是问题点和修正方案：

问题分析 #

1. props传递与接收不匹配：App组件向TodoList传递的props是todoitem，但TodoList组件里尝试读取props.TodoList，名称和大小写不匹配，导致无法获取待办数组。
2. 列表项传值错误：TodoList组件在遍历数组时，错误地将TodoItem组件本身传给子组件，而非当前遍历到的待办文本内容。
3. 函数组件props访问错误：TodoItem是函数组件，不能使用this.props访问属性，直接使用参数props即可。
4. setState异步性提示：原代码中console.log(this.state.TodoList)可能打印旧状态，因为setState是异步操作，如需验证最新状态，应使用setState的回调函数。

修正后的组件代码 #

App.js #

import React from "react";
import ControlPanel from "./ControlPanel";
import TodoList from "./TodoList";

class App extends React.Component {
  state = { TodoList: [] };

  addTask = (todoItem) => {
    this.setState({ TodoList: [...this.state.TodoList, todoItem] }, () => {
      // 回调中获取最新状态
      console.log(this.state.TodoList);
    });
  };

  render() {
    return (
      <div>
        <ControlPanel addTask={this.addTask} />
        {/* 统一props名称为TodoList，与state和子组件接收的名称一致 */}
        <TodoList TodoList={this.state.TodoList} />
      </div>
    );
  }
}

export default App;

TodoList.js #

import React from "react";
import TodoItem from "./TodoItem";

const TodoList = (props) => {
  // 正确遍历待办数组，传递文本内容给TodoItem，并添加唯一key
  const todoItems = props.TodoList?.map((todo, index) => {
    return <TodoItem key={index} todoText={todo} />;
  });

  return <div>{todoItems}</div>;
};

export default TodoList;

TodoItem.js #

import React from "react";

// 函数组件直接通过props参数访问传递的文本内容
const TodoItem = (props) => {
  return <div>{props.todoText}</div>;
};

export default TodoItem;

ControlPanel组件逻辑正常，无需修改。

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