Javascript 获得；超过最大更新深度…“；尝试添加微调器组件后出错

我正在将数据从父组件传递到子组件。父级从用户输入中获取数据

所以在子组件中，我检查是否有数据或者它是否为null。如果有数据，那么我会在进行一些计算后渲染某些内容，如果它为null，则不渲染任何内容。我想做的是在计算开始前有数据时添加一个微调器。并在计算完成后停止

我添加了微调器，并试图通过一个将状态发送到父组件的处理程序（loadingHandler）将状态设置为从子组件加载到父组件。但这给我带来了一个错误，是这样的：

Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

我在谷歌上寻找了一个解决方案，但我的情况是独特的，不同的，我没有找到

代码如下：

父组件：

class CompCalc extends Component {

    state = {
        inputData: {...},
        userInput: null,
        loading: false
    }

    handleFormData = (data) => {
        this.setState({
            userInput: data
        });
    }

    loaderHandler = (status) => {
        this.setState({
            loading: status
        })
    }

    render() {

        return (
            <React.Fragment>
                <InputForm
                    inputData={formElementsArr}
                    formData={this.handleFormData} />

                <Table 
                    loadingHandler={this.loaderHandler}
                    loaderState={this.state.loading}
                    userInput={this.state.userInput} />
            </React.Fragment>
        );
    }
}

类CompCalc扩展组件{
状态={
输入数据：{…}，
userInput:null，
加载：错误
}
handleFormData=（数据）=>{
这是我的国家({
用户输入：数据
});
}
装卸工=（状态）=>{
这是我的国家({
加载：状态
})
}
render（）{
返回(
);
}
}

子组件

const Table = ( props ) => {

    const loaderHandler = (state) => {
        props.loadingHandler(state);
    }

    let initialAmountInput;
    let interestRateInput;
    let tdArr = [];
    let render;

        
    if( props.userInput ) {
        loaderHandler(true); //set the loading state in parent component to start the spinner

        initialAmountInput      = props.userInput[0].value;
        interestRateInput       = props.userInput[1].value;
        

        for(let i = 1; i <= 6; i++){
     
            tdArr.push(
                        <tr key={i}>
                            <td>${initialAmountInput * 50}</td>
                            <td>${interestRateInput * 100}</td>
                        </tr>)
            
        };  
        
        render = <div>
                    <table>
                        <thead>
                            <tr>
                                <th>Initial Amount</th>
                                <th>Interest Rate</th>
                            </tr>
                        </thead>
                        <tbody>
                            {tdArr}
                        </tbody>
                    </table>
                </div>


        loaderHandler(false); // set the state in parent component to false to turn off the spinner
    }else{
        render = null;
    }

    if( props.loaderState ) {
        render = <Spinner />
    }

    return (
        <div>
            {render}
        </div>
    )

};

const表=（道具）=>{
常量loaderHandler=（状态）=>{
道具装卸工（州）；
}
让我们一起输入；
让利息投入；
设tdArr=[]；
让我们呈现；
if（props.userInput）{
loaderHandler（true）；//在父组件中设置加载状态以启动微调器
initialAmountInput=props.userInput[0]。值；
interestRateInput=props.userInput[1]。值；
for（设i=1；i更改状态是异步的；在函数开头调用
loaderHandler（true）；
，然后调用
loaderHandler（false）
最后将无法像您想象的那样工作。我假设您正在进行的计算不到一毫秒。还要注意的是，从表组件内部更改加载状态并没有真正意义；表的任务只是显示数据；任何计算都应该在父级中进行。这里有一种使用方法这方面的微调器：如果你确实有大量的计算，而显示微调器是有意义的，那么最好使用
useffect
hooks和仔细声明的依赖项来实现。@ChrisG Hi。谢谢你的回复。我在这里提供的计算只是一个小片段。它实际上有点大，但没有t大o显示微调器。但我仍然想添加它，因为我正在学习各种东西。您提供的沙盒代码非常棒。但是，有一个问题。微调器最初在那里，当有数据时它停止显示。我想要的是没有任何内容。在用户输入一些内容后，微调器将显示（即使是一毫秒）然后数据就会显示出来。你能添加一下吗？如果没有数据，那么它就会是空的吗？你是对的，我已经相应地更改了comp表，演示了如何使用
useffect
我添加了一个计时器来模拟长时间的计算。我的代码主要是关于如何实现你想要的加载。我也不会发布回答是因为我不知道如何开始写。理解状态如何工作，尤其是钩子如何工作（在我看来，这不适合初学者），是React文档的一大部分，所以发布一个基本上是文档副本的长答案是毫无意义的。