React setState同步更新state

在写页面的筛选功能时，遇到一个问题。在清除事件（onClear）中重置内容为“请选择”后，却在页面渲染时未拿到最新的内容。

问题

问题如下图：

需求

我想要得到的效果要是下图这样

遇到问题时的代码

import React, { Component } from 'react'
import { Wrapper } from './style';
import { Button, Modal, Form, Input, message, Select, InputNumber, Menu, Dropdown, Pagination,Checkbox,Popconfirm,Row,Col,DatePicker,Spin, Space, Radio} from 'antd';
import SearchBox, { SearchBoxItem } from '@c/searchBox';

const { Option } = Select;

class ChangeTheReportList extends Component {
    constructor(props) {
        super(props)
    
        this.state = {
            loading: false,
            current: 1,
            size: 10,
            tableData:[],
            total: 0,
            listingNumber: '',
            choiceContractor:"请选择",
            choiceContractorList:[],
        }
        this.formRef = React.createRef();
    }

    async getTableData() {
       
    }

    contractorInputOnchange(val) {
        this.setState({
            listingNumber: val.target.value&&val.target.value.replace(/s+/g,'')
        });
    }
    
    onSearch() {
        this.getTableData();
    }

    choiceContractorChange(val) {
        this.setState({
            choiceContractor: val,
        });
    }

    clearChoiceContractror(val) {
        this.setState({
            choiceContractor: "请选择",
        });
    }

    render() {
        const { loading, current, size, total, tableData , choiceContractor, choiceContractorList} = this.state;

        return (
            <Wrapper className="page-container">
                <Spin spinning={loading}>
                    <SearchBox ref={ref => this.formRef = ref} searchButton={<Button type="primary" onClick={() => this.onSearch()}>搜索</Button>} showOpen={false}>
                        <Row gutter={16}>
                            <Col style={{ width: '300px' }}>
                                <Form.Item name="contractorInput" label="分包清单搜索">
                                    <Input placeholder="请输入" onChange={this.contractorInputOnchange.bind(this)}/>
                                </Form.Item>
                            </Col>
                            <Col style={{ width: '300px'}} >
                                <Form.Item label="承包商选择：">
                                    <Select style={{ width: '100%'}} placeholder={choiceContractor} onChange={this.choiceContractorChange.bind(this)} allowClear onClear={this.clearChoiceContractror.bind(this)}>
                                        {choiceContractorList && choiceContractorList.map(d => (<Option value={d.contractorIdStr} >{d.contractorName}</Option>))}
                                    </Select>
                                </Form.Item>
                            </Col>
                        </Row>
                    </SearchBox>
                </Spin>
            </Wrapper>
        )
    }
}

export default ChangeTheReportList;

解决问题

产生问题的原因，应该是setState方法并未同步实时的去更新state
下面是找到的一种解决这个问题的方法

clearChoiceContractror(val) {
    setTimeout(() => {
        this.setState({
            choiceContractor: "请选择",
        });
    }, 0);
}

最后

以上就是甜美果汁为你收集整理的React setState同步更新state的全部内容，希望文章能够帮你解决React setState同步更新state所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。