React中子组件向父组件传值失效问题：如何修复？

问题描述 #

现有React组件结构中，App为父组件，Inputs和List为子组件。输入框能正常更新person状态，但点击"add person"按钮时，父组件的people列表未更新，回调函数不生效。

错误根源 #

1. people未用React状态管理：父组件中people是普通数组，修改它不会触发组件重渲染，也无法持久保存数据。
2. 按钮点击事件写法错误：Inputs组件的onClick={callback(people)}会在组件渲染时立即执行函数，而非点击按钮时触发，且people在Inputs中未定义。
3. 状态更新违反不可变原则：即使people是状态，直接用push修改原数组也无法被React检测到状态变化。

修复方案及代码 #

修正后的App.js

import React from 'react';
import './App.css';
import Inputs from './components/Inputs';
import List from './components/List';
import { useState } from 'react';

function App() {
  const [person, setPerson] = useState({ name: '', email: '' });
  // 将people改为React状态变量，初始值为空数组
  const [people, setPeople] = useState([]);

  const callback = (newPerson) => {
    // 用不可变方式更新数组：基于旧状态创建新数组，避免直接修改原数组
    setPeople(prevPeople => [...prevPeople, newPerson]);
    // 可选：添加完成后清空输入框
    setPerson({ name: '', email: '' });
  };

  console.log('people: ', people);
  return (
    <div>
      <Inputs callback={callback} person={person} setPerson={setPerson} />
      <List people={people} /> {/* 可将people传递给List组件用于渲染 */}
    </div>
  );
}

export default App;

修正后的Inputs.js

const Inputs = ({ person, setPerson, callback }) => {
  const updateName = (e) => {
    setPerson({ ...person, name: e.target.value });
  };

  const updateEmail = (e) => {
    setPerson({ ...person, email: e.target.value });
  };

  console.log('person: ', person);
  return (
    <div>
      <label>name:</label>
      {/* 添加value属性，将输入框设为受控组件，确保与状态同步 */}
      <input onChange={updateName} value={person.name} />
      <label>email:</label>
      <input onChange={updateEmail} value={person.email} />
      {/* 用箭头函数包裹回调，确保点击时才执行，并传入当前的person对象 */}
      <button onClick={() => callback(person)}>add person</button>
    </div>
  );
};

export default Inputs;

关键修复点说明 #

• 将people改为useState管理的状态，保证状态更新能触发组件重渲染，数据持久化。
• 按钮点击事件改用箭头函数包裹，避免渲染时立即执行回调，同时正确传递当前的person数据。
• 输入框添加value属性，转为受控组件，确保输入值与person状态完全同步。
• 更新people时使用函数式更新，确保获取最新的前序状态，避免闭包导致的状态不一致问题。

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