React子组件向父组件传值时遇无限循环与渲染失效问题求助

Hey there! Let's break down the issues you're facing step by step—since you're new to React, these state management pitfalls are super common, so don't stress about it!

为什么会出现无限循环？ #

通常直接调用setState导致无限循环，是因为你在组件渲染过程中（比如render方法里、或者函数组件的顶层代码）直接执行了setState，或者在没有正确条件判断的生命周期方法里调用了它。每次setState都会触发组件重新渲染，而重新渲染又会再次调用setState，就形成了死循环。

为什么自定义变量不触发渲染？ #

你在constructor里定义的this.name = ''、this.selected = []这类变量，属于组件的普通实例属性，React不会跟踪它们的变化。当你修改这些变量时，React没有收到“需要重新渲染页面”的信号，所以即使值变了，页面也不会更新。只有React的state（或者函数组件里的useState）才会触发组件的重新渲染机制。

正确的子组件向父组件传值方式 #

核心思路很简单：父组件传递一个回调函数给子组件，子组件在触发点击（或其他事件）时调用这个回调，把需要传递的值传回去，父组件在回调里更新自己的state，这样就能正常触发渲染了。

Class组件示例 #

// 父组件
class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
    // 用state管理需要驱动渲染的数据
    this.state = {
      selectedItem: '',
      selectedList: []
    };
  }

  // 定义回调函数，接收子组件传来的值
  handleChildValue = (value, isList = false) => {
    if (isList) {
      // 处理数组类型的更新，用prevState确保拿到最新状态
      this.setState(prevState => ({
        selectedList: [...prevState.selectedList, value]
      }));
    } else {
      this.setState({ selectedItem: value });
    }
  }

  render() {
    return (
      <div>
        <p>当前选中项：{this.state.selectedItem}</p>
        <p>选中列表：{this.state.selectedList.join(', ')}</p>
        {/* 把回调函数传给子组件 */}
        <ChildComponent onValueChange={this.handleChildValue} />
      </div>
    );
  }
}

// 子组件
class ChildComponent extends React.Component {
  handleButtonClick = (item) => {
    // 点击按钮时调用父组件传来的回调，把值传回去
    this.props.onValueChange(item);
  }

  handleAddToList = (item) => {
    this.props.onValueChange(item, true);
  }

  render() {
    return (
      <div>
        <button onClick={() => this.handleButtonClick('选项A')}>选项A</button>
        <button onClick={() => this.handleButtonClick('选项B')}>选项B</button>
        <button onClick={() => this.handleAddToList('新增项1')}>添加到列表</button>
      </div>
    );
  }
}

关键注意点 #

• 永远不要在render方法里直接调用setState，也不要在没有条件判断的componentDidUpdate里调用（比如要加if (prevProps.someValue !== this.props.someValue)这类判断）。
• 所有需要驱动页面渲染的数据，必须放在state里管理，普通实例变量无法触发React的渲染机制。
• 传递回调给子组件时，确保是传递函数引用，而不是直接执行函数（比如不要写onValueChange={this.handleChildValue('A')}，这会在渲染时直接执行函数导致无限循环，应该用箭头函数包裹：onValueChange={() => this.handleChildValue('A')}）。

如果是函数组件，思路完全一致，只是用useState来管理状态，传递回调的方式也一样~

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