反應不渲染數組

Question

我是新來的反應並試圖創建一個簡單的待辦事項列表來理解反應狀態和道具，但似乎無法理解為什么它沒有在屏幕上呈現數組。 當按下按鈕時，控制台會記錄輸入數組，所以我知道這是有效的。

這是每個組件目前沒有錯誤只是沒有顯示。

應用程序.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} />
        <TodoList todoitem={this.state.TodoList} />
      </div>
    );
  }
}

export default App;

控制面板.js：

import React from "react";

class ControlPanel extends React.Component {
  state = { todoItem: "" };

  addItem = (event) => {
    event.preventDefault();

    this.props.addTask(this.state.todoItem);
  };

  render() {
    return (
      <div className="ui card">
        <div className="ui input">
          <input
            onChange={(e) => {
              this.setState({ todoItem: e.target.value });
            }}
            value={this.state.todoItem}
            type="text"
            placeholder="Todo List Item"
          />
        </div>
        <div>
          <button onClick={this.addItem} className="ui button">
            Add Item
          </button>
        </div>
      </div>
    );
  }
}

export default ControlPanel;

TodoList.js：

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

const TodoList = (props) => {
  const todoItems = props.TodoList?.map((todo) => {
    return <TodoItem TodoItem={TodoItem} />;
  });

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

export default TodoList;

TodoItem.js

import React from "react";

const TodoItem = (props) => {
  return <div>{this.props.TodoItem}</div>;
};

export default TodoItem;

Answer 1

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

const TodoList = (props) => {
  const todoItems = props.TodoList?.map((todo,idx) => {
    return <TodoItem TodoItem={todo} key={idx} />; // idx or any unique key
  });

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

export default TodoList;

有關key https://reactjs.org/docs/lists-and-keys.html的更多信息