在render（）中更新状态时，防止无限循环

Posted 2021-04-11

我有以下用例，其中有一个input，只要发生更改，我就需要重新计算一些东西并重新渲染它们。

我的问题是，我需要在render()中调用的函数中更新状态。但是，这将导致无限循环，因为每次此类更新都会导致render()重新运行。

class Test extends Component {
    state= {
        inputVal='a'
        count=0
    }

    inputChanged = event => this.setState({inputVal: event.target.value});

    calculateThingsToBeRendered = () => {
         // the value for "count" is calculated (using a hardcoded value to simulate)
         let localCount = 5

         // need to update the value of the state's "count" here (render() will re-run)
         return (
            <div> Irrelevant thing to render </div>
         );
    }

    render() {

        let thingsToRender = this.calculateThingsToBeRendered();

        return {
            <div>
                <input type="text" onChange={this.inputChanged} value={this.state.inputVal} />
                {this.state.count}
                <div>
                   {thingsToRender}
                </div>
            </div>
        }
    } 
}

1. 使用shouldComponentUpdate不能满足我的需求，因为count的更新值不会在UI中更新。
2. 将在calculateThingsToBeRendered内完成的计算（以便使状态的count部分在那里更新）移动到inputChanged无效，因为我需要render中相同函数返回的JSX。 >

我有以下用例，其中有一个输入，只要输入发生变化，就需要重新计算一些东西并重新渲染它们。我的问题是我需要更新函数中的状态...

答案

我不明白为什么您“需要”运行一个更新渲染函数状态的函数。