React初始加载时customFilter状态未正确初始化问题求助

核心是异步操作的时序问题：

• getFilter里的axios.get是异步请求，调用后不会立刻拿到数据，要等接口返回才会执行setState更新customFilter。
• 你在componentWillMount里调用getFilter，接着componentDidMount马上调用getOpenClaims，这时候axios请求还没完成，customFilter还没被更新到state里，所以打印出来是undefined。
• 后续手动触发getOpenClaims时，getFilter的请求已经结束，state已经更新，自然能拿到预期值。

另外注意：componentWillMount在React 16.3+已被标记为过时API，官方推荐改用componentDidMount，避免潜在的渲染异常。

给你几个实用的方案，选适合自己的就行：

方案一：在getFilter的请求回调里调用getOpenClaims #

等customFilter更新完成后再执行接口请求，确保数据就绪：

private getFilter() {
    axios.get(getEndPoint)
        .then(response => {
            const defaultselected = JSON.parse(response.data['JsonValue']);
            // 用setState的回调函数，确保state已经更新完成
            this.setState({ customFilter: defaultselected }, () => {
                this.getOpenClaims(1);
            });
        })
}

// 修改生命周期函数：
async componentDidMount() {
    document.title = "Claim Aging";
}

componentWillMount() {
    this.getFilter();
}
// 更推荐的做法：删掉componentWillMount，把getFilter移到componentDidMount里

方案二：用async/await统一控制异步顺序 #

把getFilter改成异步函数，在componentDidMount里按顺序执行，确保前一步完成再走下一步：

// 封装支持await的setState（原生setState是异步的，没有返回Promise）
private setStateAsync(state: any) {
    return new Promise(resolve => {
        this.setState(state, resolve);
    });
}

private async getFilter() {
    const response = await axios.get(getEndPoint);
    const defaultselected = JSON.parse(response.data['JsonValue']);
    await this.setStateAsync({ customFilter: defaultselected });
}

async componentDidMount() {
    document.title = "Claim Aging";
    await this.getFilter();
    // 等customFilter更新完成后再调用
    this.getOpenClaims(1);
}

// 删掉componentWillMount

方案三：在getOpenClaims里做数据校验 #

如果业务上允许延迟执行逻辑，可以在getOpenClaims里先判断customFilter是否存在，不存在就不执行核心逻辑：

getOpenClaims = (pageNumber: number) => {
    if (!this.state.customFilter) {
        console.log('筛选条件还没加载好，暂时不执行请求');
        return;
    }
    // 这里写你的核心业务逻辑
    console.log('getOpenClaims', this.state.customFilter);
}

这个方案适合需要用户主动触发的场景，但首次加载的话还是前两个方案更可靠。

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