React中使用父组件另一状态时更新父状态如何避免无限更新？

问题根因 #

你遇到的无限循环由两个核心问题导致：

• B组件的render方法中直接执行了transform函数，而transform内部调用了父组件A的状态更新方法。父组件状态更新后会触发自身重渲染，进而引发子组件B重渲染，B重渲染又会再次执行transform触发状态更新，形成死循环
• 代码中存在语法错误：updateTransformedContent方法里的this.setState = { transformedContent: newContent }写法错误，setState是类组件的内置方法，应该写成this.setState({ transformedContent: newContent })，错误写法也会引发状态更新异常

最优方案：状态提升，转换逻辑移至父组件 #

因为transform是纯计算逻辑，本身不依赖B组件的内部状态，直接将逻辑提到父组件A中是最简洁的实现，完全避免了子组件反向修改父组件状态的问题：

class A extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            contentForB: "",
            // 直接在父组件维护转换后的状态
            transformedContent: ""
        };
    }

    // 把transform逻辑移到A中
    transform(content) {
        let newContent = /* 原有转换逻辑 */;
        return newContent;
    }

    // 当contentForB更新时同步计算转换后的内容
    componentDidUpdate(prevProps, prevState) {
        if (prevState.contentForB !== this.state.contentForB) {
            this.setState({
                transformedContent: this.transform(this.state.contentForB)
            })
        }
    }

    render() {
        return (
            {/* 其他渲染逻辑 */}
            {/* 直接把转换后的内容传给B展示即可 */}
            <B transformedContent={this.state.transformedContent} />
            <ComponentUsingTransformedContent transformedContent={this.state.transformedContent} />
        );
    }
}

class B extends React.Component {
    render() {
        return <Something value={this.props.transformedContent} />
    }
}

方案二：转换逻辑必须保留在B组件的情况 #

如果转换逻辑和B组件的内部状态/渲染逻辑强绑定，无法移到父组件，可以调整B组件的更新时机，避免在render中触发父组件状态更新：

class A extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            contentForB: "",
            transformedContent: ""
        };
        this.updateTransformedContent = this.updateTransformedContent.bind(this);
    }
    
    // 修正setState的语法错误
    updateTransformedContent(newContent) {
        this.setState({ transformedContent: newContent });
    }

    render() {
        return (
            {/* 其他渲染逻辑 */}
            <B 
              content={this.state.contentForB}
              updateTransformedContent={this.updateTransformedContent} 
            />
            <ComponentUsingTransformedContent transformedContent={this.state.transformedContent} />
        );
    }
}

// B组件继承PureComponent，避免props无变化时的不必要重渲染
class B extends React.PureComponent {
    constructor(props) {
        super(props);
        this.transform = this.transform.bind(this);
    }
    
    transform(content) {
       let newContent = /* 原有转换逻辑 */;
       return newContent;
   }

   // 在生命周期中监听content变化，仅当content变更时才触发父组件更新
   componentDidMount() {
       const transformed = this.transform(this.props.content);
       this.props.updateTransformedContent(transformed);
   }

   componentDidUpdate(prevProps) {
       // 加判断，只有content真的变化了才执行转换和更新
       if (prevProps.content !== this.props.content) {
           const transformed = this.transform(this.props.content);
           this.props.updateTransformedContent(transformed);
       }
   }

   render() {
       // render中只做渲染逻辑，不触发任何状态更新
       return <Something value={this.transform(this.props.content)} />
   }
}

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