react.js - componentDidMount和handleChange分别处理setState()问题

问题描述

问 题

问题：通过componentDidMount调用setState()可以正常更新state的数据，但是组件里的select绑定handleChange方法后，在handleChange方法里调用setState()更新state没有任何反应，代码如下，请协助，多谢了。

import { Select, Card, Form, Input, Row, Col, Button } from 'antd';
import BreadcrumbCustom from '../BreadcrumbCustom';
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { getBackendData } from './jsonp';  //导入请求后端的组件
const Option = Select.Option;
const FormItem = Form.Item;

const formItemLayout = {
    labelCol: {
        xs: { span: 24 },
        sm: { span: 8 },
    },
    wrapperCol: {
        xs: { span: 24 },
        sm: { span: 14 },
    },
};

function renderForm(value,datas,callback) {
    datas.forEach((data) => {
        if (data.id == value) {
            const columns= data.columns;
            const form = [];
            columns.forEach((field) => {
                form.push({
                    id:column.id,
                })
            })
            callback(form);
        }
    })
}

class testComponent extends React.Component{
    state = {
        options :[],
        form : [],
        datas :[],
    }
    componentDidMount() {
        getBackendData ().then(res => {
            const options = [];
            const datas = res.data;
            datas.forEach((r) => {
                options.push({
                    value:r.id,
                    text:r.name,
                })
            })
            this.setState({options,datas})  //state更新成功
        });
    }
    handleChange = (value) => {
        console.log(this.state);
        const form = ['a'];
        const datas = ['b'];
        this.setState({datas,form});   //state没有变化
        console.log('the current state is :',this.state)
        renderForm(value,this.state.datas,forms => this.setState({ forms }));  //这里同样state没有变化
    }
    render() {
        const options = this.state.options.map(d => <Option key={d.value}>{d.text}</Option>);
        return (
            <div className="gutter-example">
                <BreadcrumbCustom first="1" second="2" />
                <Row gutter={16}>
                    <Col className="gutter-row" span={24}>
                        <div className="gutter-box">
                            <Card title="select" bordered={false}>
                                <Form onSubmit={this.handleSubmit}>
                                    <FormItem
                                        {...formItemLayout}
                                        label="测试select"
                                        hasFeedback
                                    >
                                    <Select
                                    showSearch
                                    style={{ width: 200 }}
                                    placeholder="Select please"
                                    optionFilterProp="children"
                                    onChange={this.handleChange}
                                    filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
                                    >
                                        {options}
                                    </Select>
                                    </FormItem>
                                </Form>
                            </Card>
                        </div>
                    </Col>
                </Row>
            </div>
        )
    }
}
export default testComponent ;

解决方案

setState是不保证同步的，所以试试：

handleChange = (value) => {
        console.log(this.state);
        const form = ['a'];
        const datas = ['b'];
        this.setState({datas,form}, ()=>{
            console.log('the current state is :',this.state)
            renderForm(value,this.state.datas,forms => this.setState({ forms }));  //这里同样state没有变化
        });   //state没有变化
        
    }

这篇关于react.js - componentDidMount和handleChange分别处理setState()问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！