reactjs - 无法正确设置状态

问题描述

我是新来的反应并尝试使用 Material UI 制作表单。以下是我尝试过的代码示例。表单在首次加载时正确呈现，但是当我尝试更改选择元素时，它显示错误。有人可以请指出我做错了什么。显示 values.service_category.map 不是函数的错误。

const service_category = [
    {
        value: "service one",
        id: "1"
    },
    {
        value: "service two",
        id: "2"
    }

];

function getServices() {
    return service_category.filter(g => g);
}

class ServiceRequestForm extends Component {

    state = {
        step: 1,
        service_category: [],
        service_req_date: '',
        data: [
            {
                full_name: '',
                address_one: '',
            }
        ],

        hasError: false
    }

    componentDidMount() {
        const service_category = getServices();
        this.setState({ service_category })

    }

    handleChange = (event) => {
        this.setState({
            [event.target.name]: event.target.value
        });
    }

    render() {        
        const { step } = this.state;
        const { service_category } = this.state;
        const values = { service_category };

        switch (step) {
            case 1:
                return (
                    <ServiceCategoryForm
                        nextStep={this.nextStep}
                        handleChange={this.handleChange}
                        values={values}
                    />
                );

              // Some other form  based on switch case.        
        }
    }
}

export default ServiceRequestForm;


export default class ServiceCategoryForm extends Component {

    render() {

      const { handleChange, values } = this.props;

        return (

            <div style={{ marginTop: '100px' }}>

                <h4>Select service you want</h4>

                <form>
                    <FormControl error={hasError}>

                        <Select
                            value={values}

                            onChange={handleChange}
                            inputProps={{name: "service_category"}}

                        >
                            <MenuItem value="">
                                <em>Select Category</em>
                            </MenuItem>
                            {
                                values.service_category.map((value, id) =>{

                                    return  <MenuItem value={value.value} key={id}>{value.value}</MenuItem>;
                                })
                            }

                        </Select>
                        <FormHelperText>Please select service category</FormHelperText>

                    </FormControl>
                </form>                
            </div>
        )
    }
}

标签： reactjssetstate

试试这个：

代替

values.service_category.map((value, id)

到：

values && values.service_category.map((value, id)

reactjs - 无法正确设置状态

问题描述

解决方案

推荐阅读