React组件状态传递问题：TodoList应用Form组件状态传递问询

嘿，作为React新手碰到这个状态传递的问题太正常啦！这其实是React里非常经典的状态提升场景——咱们得把共享的状态放到组件树里最接近需要它的所有组件的共同父组件（也就是你的App.js）里来管理。我给你一步步拆解怎么做：

核心思路 #

React是单向数据流，组件的状态只能向下传递。所以咱们要把allTasks这个共享状态从Form组件移到App.js，再通过props把状态和修改状态的方法分发给需要的子组件：

• App.js：持有allTasks状态，提供添加任务的方法
• Form组件：调用App传过来的添加方法，把用户输入的任务传给App
• List组件：接收App传过来的allTasks，渲染任务列表

具体代码实现 #

1. 改造App.js：管理共享状态 #

把allTasks状态移到App里，同时定义一个更新状态的方法handleAddTask，再把这两个值传给MainBlock组件：

import { useState } from 'react';
import MainBlock from './MainBlock';

function App() {
  // 共享状态：所有任务列表
  const [allTasks, setAllTasks] = useState([]);

  // 定义添加任务的方法，接收新任务并更新状态
  const handleAddTask = (newTask) => {
    // 注意：不要直接修改原数组，要返回新数组保证不可变性
    setAllTasks(prevTasks => [...prevTasks, newTask]);
  };

  return (
    <div className="App">
      {/* 把状态和修改方法传给MainBlock */}
      <MainBlock allTasks={allTasks} onAddTask={handleAddTask} />
    </div>
  );
}

export default App;

2. 改造MainBlock：传递props给子组件 #

MainBlock作为中间组件，只需要把App传过来的props分发给Form和List即可：

import Form from './Form';
import List from './List';

function MainBlock({ allTasks, onAddTask }) {
  return (
    <div className="main-block">
      {/* 把任务列表传给List */}
      <List allTasks={allTasks} />
      {/* 把添加方法传给Form */}
      <Form onAddTask={onAddTask} />
    </div>
  );
}

export default MainBlock;

3. 改造Form组件：移除本地状态，调用父组件方法 #

Form不再自己维护allTasks，只需要管理输入框的临时状态，提交时调用App传过来的onAddTask方法：

import { useState } from 'react';

function Form({ onAddTask }) {
  // 只维护输入框的本地临时状态
  const [inputValue, setInputValue] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    // 简单校验：空任务不添加
    if (!inputValue.trim()) return;
    // 调用父组件传过来的方法，把新任务传上去
    onAddTask(inputValue.trim());
    // 清空输入框
    setInputValue('');
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
        placeholder="输入新任务..."
      />
      <button type="submit">添加任务</button>
    </form>
  );
}

export default Form;

4. 改造List组件：接收props渲染任务 #

List只需要接收allTasks props，然后渲染任务列表即可：

function List({ allTasks }) {
  return (
    <div className="task-list">
      <h3>我的任务</h3>
      {allTasks.length === 0 ? (
        <p>还没有任务，添加一个吧！</p>
      ) : (
        <ul>
          {/* 注意：实际项目中最好用唯一ID当key，这里用index只是示例 */}
          {allTasks.map((task, index) => (
            <li key={index}>{task}</li>
          ))}
        </ul>
      )}
    </div>
  );
}

export default List;

这样改造后，整个数据流就清晰了：用户在Form输入任务 → 提交时调用App的handleAddTask更新allTasks → App把更新后的allTasks传给List → List渲染最新的任务列表，完全符合React的单向数据流原则。

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