ReactJS：子组件状态变更时更新父组件状态的问题排查

背景 #

我正在开发ReactJS项目，需要实现一个包含复选框和文本输入框的可复用待办事项子组件，当前组件结构如下：

<Parent >
  --| <Child value={text1} checked={false}/>
  --| <Child value={text2} checked={false}/>
</Parent>

父组件通过value和checked属性分别给子组件传递文本输入框内容和复选框状态。

目前核心问题：尝试在子组件中修改父组件传入属性对应的状态时，React抛出未捕获错误，页面因无限渲染冻结。想搞清楚如何通过React Hooks、createRef等方式实现子组件变更同步到父组件状态，或者是否需要引入react-redux来解决。

现状与问题 #

我已经按照建议修改了代码，在父组件中创建handleInputChange函数，通过传入key值更新对应状态，但仍存在两个问题：

• 依旧触发无限渲染循环
• event.target.value始终为undefined

修改后的代码如下：

父组件代码 #

export class Parent extends Component {
   constructor(props) {
     super(props);
     this.state = {
        text1 = '';
        text2 = '';
        isCheckedAll = false;
     }
     this.handleInputChange = this.handleInputChange.bind(this);
   }
   handleInputChange = (key) => {
     switch (key) {
       console.log("Updating on component: ", key);
       case 'key1':
          this.setState({text1 : Event.target.value});
          break;
       case 'key2':
          this.setState({text2 : Event.target.value});
          break;
       default:
          break;
     }
   }

   render() {
     return (
        <Child value={this.state.text1}, onchange= this.handleInputChange('key1') checked = false/>
        <Child value={this.state.text1}, onchange= this.handleInputChange('key1') checked = false/>
     )
   }
}

子组件代码 #

export class Child extends component {
  constructor(props) {
    super(props);
  }


  render() {
    return (
       <>
         <div className="checkbox-wrapper">
            <label>
                <input type="checkbox" checked={this.props.checked} />
            </label>
         </div> 

         <div className="input text-bar">        
           <label>
             <p className="input-label">Input field: </p>
             <input name={this.props.value} className="text-box" type="text" onChange={this.props.onChange} />
           </label>
         </div>
       </>
    )
  }
}

问题分析 #

1. 无限渲染循环的根源 #

父组件render方法中直接调用this.handleInputChange('key1')，会导致每次渲染时立即执行该函数，而函数内部调用setState又会触发重新渲染，形成无限循环。正确做法是传递函数引用，而非立即执行函数。

2. event.target.value undefined的原因 #

• handleInputChange没有接收event参数：需要改成高阶函数，先接收key，再返回处理event的函数。
• 代码错误使用大写Event，应为小写event。

3. 其他语法与逻辑错误 #

• 父组件state初始化用了等号=，正确语法是冒号:。
• 子组件定义时component需大写为Component。
• 文本输入框未绑定value属性，变成非受控组件，无法和父组件状态同步。
• 复选框缺少onChange事件处理，无法更新选中状态。

修复方案 #

类组件版本 #

父组件

export class Parent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      text1: '',
      text2: '',
      checked1: false,
      checked2: false,
      isCheckedAll: false
    };
  }

  // 高阶函数：先接收key，返回处理event的函数
  handleInputChange = (key) => (event) => {
    this.setState({
      [key]: event.target.value
    });
  };

  handleCheckboxChange = (key) => (event) => {
    this.setState({
      [key]: event.target.checked
    });
  };

  render() {
    return (
      <>
        <Child
          value={this.state.text1}
          checked={this.state.checked1}
          onInputChange={this.handleInputChange('text1')}
          onCheckboxChange={this.handleCheckboxChange('checked1')}
        />
        <Child
          value={this.state.text2}
          checked={this.state.checked2}
          onInputChange={this.handleInputChange('text2')}
          onCheckboxChange={this.handleCheckboxChange('checked2')}
        />
      </>
    );
  }
}

子组件

export class Child extends Component {
  render() {
    const { value, checked, onInputChange, onCheckboxChange } = this.props;
    return (
      <>
        <div className="checkbox-wrapper">
          <label>
            <input
              type="checkbox"
              checked={checked}
              onChange={onCheckboxChange}
            />
          </label>
        </div>

        <div className="input text-bar">
          <label>
            <p className="input-label">Input field: </p>
            <input
              className="text-box"
              type="text"
              value={value}
              onChange={onInputChange}
            />
          </label>
        </div>
      </>
    );
  }
}

Hooks版本（推荐） #

用函数式组件+Hooks实现会更简洁，也更符合当前React开发趋势：

父组件

import { useState } from 'react';

export function Parent() {
  const [todos, setTodos] = useState([
    { id: 1, text: '', checked: false },
    { id: 2, text: '', checked: false }
  ]);

  const handleInputChange = (id) => (event) => {
    setTodos(todos.map(todo => 
      todo.id === id ? { ...todo, text: event.target.value } : todo
    ));
  };

  const handleCheckboxChange = (id) => (event) => {
    setTodos(todos.map(todo => 
      todo.id === id ? { ...todo, checked: event.target.checked } : todo
    ));
  };

  return (
    <>
      {todos.map(todo => (
        <Child
          key={todo.id}
          value={todo.text}
          checked={todo.checked}
          onInputChange={handleInputChange(todo.id)}
          onCheckboxChange={handleCheckboxChange(todo.id)}
        />
      ))}
    </>
  );
}

子组件

export function Child({ value, checked, onInputChange, onCheckboxChange }) {
  return (
    <>
      <div className="checkbox-wrapper">
        <label>
          <input
            type="checkbox"
            checked={checked}
            onChange={onCheckboxChange}
          />
        </label>
      </div>

      <div className="input text-bar">
        <label>
          <p className="input-label">Input field: </p>
          <input
            className="text-box"
            type="text"
            value={value}
            onChange={onInputChange}
          />
        </label>
      </div>
    </>
  );
}

是否需要React-Redux？ #

完全不需要。只有当状态需要在多个无关组件或全局范围内共享时，才考虑使用Redux这类状态管理库。当前场景仅涉及父子组件间的状态同步，用React状态提升（将状态放在父组件，子组件通过props传递回调更新状态）就足够解决问题。

内容的提问来源于stack exchange，提问作者Việt Tùng Nguyễn