javascript - 如何在componentDidUpdate()中更新组件的状态而不会陷入无限的重新渲染中?

我有一个带有componentDidMount()方法的组件,该组件调用称为getData()的方法,该方法获取初始数据并设置组件的初始状态。

class LogsSettings extends React.Component {
constructor(props) {
    super(props);

    this.settingsUrls = [
        "/ui/settings/logging"
    ];

    this.state = {
        configSettings: {},
        formSchema: formSchema
    };

    this.configSettings = {};
    this.selected = "general";

}

    getData = (url, selectedSetting) => {
    fetch(url)
        .then((response) => {
                if (response.status !== 200) {
                    console.log('Looks like there was a problem. Status Code: ' +
                        response.status);
                    return;
                }
                response.json().then((response) => {
                    //pass formschema here
                    console.log(selectedSetting);
                    let newFormSchema = this.setNonDefaultValues(response.data, formSchema.subsections);
                    Object.assign(this.configSettings, response.data);
                    this.setState({
                       configSettings : this.configSettings,
                        formSchema: newFormSchema
                   });
                });
            }
        )
        .catch((err) => {
            console.log('Fetch Error :-S', err);
        });
};


componentDidMount() {
    this.settingsUrls.map((settingUrl) => {
        this.getData(settingUrl, this.selected)

})

}

componentDidUpdate() {
    this.settingsUrls.map((settingUrl) => {
        this.getData(settingUrl, this.props.selectedSetting)

})

}



render() {

    return (
        <div className="card-wrapper">
            <h2>{formSchema.label.toUpperCase()}</h2>
            {
                formSchema.subsections.map((subSection) => {
                    return (
                        <>
                            <h3>{subSection['description']}</h3>
                            <div style={{marginBottom: '10px'}}></div>

                            {
                                subSection['input_fields'].map((inputField) => {
                                    return buildForm(inputField, this.handleChange)
                                })
                            }
                            <hr></hr>
                        </>
                    )
                })
            }
            <button className="button button-primary">Save Changes</button>
        </div>
    )
}

}


但是,传递给此组件中 selectedSetting方法的 getData()参数将更改,并且当更改时,我需要更改组件的状态并获取特定于更改后的 selectedSetting参数的新数据。

新的 selectedSetting作为prop传递到组件中。问题是当新的 selectedSetting参数陷入无限循环时,我无法将新的 getData参数传递给我的 selectedSetting方法来更新组件的状态。

如何将新的 getData()传递给 selectedSetting方法而又不会陷入无限循环?这有可能吗?如果没有,我应该采取的最佳方法是什么?

请注意, getData()函数中尚未使用 ConfigSettings参数,但会使用该参数,它将用于从API调用和新的表单模式中获取数据,然后将其引向 formSchema 状态正在改变

最佳答案

如果仔细查看组件的生命周期,则在挂载之后,将获取并更新组件。这将触发componentDidUpdate生命周期方法,该方法将执行相同的操作,从而导致无限循环。您需要具有一个标志,用于检查this.props.selected是否已更改。如果没有,请不要获取数据,否则请正常获取。在更新方法中,您可以访问以前的道具。 (您也可以在componentShouldUpdate方法中执行此操作,但这完全有风险)

componentDidUpdate(prevProps) {
    if( prevProps.selectedSetting !== this.props.selectedSetting ){
       this.settingsUrls.map((settingUrl) => {
         this.getData(settingUrl, this.props.selectedSetting)
      })
    }
}


也是一个提示,我注意到您的didMount方法使用默认的“常规”作为选定设置,因为如果要使用 this.props.selectedSetting代替默认设置,则希望使用 改为“一般”。