无法正确设置状态

Question

我是新来的反应并尝试使用 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>
        )
    }
}

Answer 1

而不是像这样创建一个对象，

const values = { service_category };

您只需要简单的分配，例如，

const values = service_category ;

第二件事是你的迭代是错误的，你需要这样做，

{
  values.map(value =>{
    return  <MenuItem value={value.value} key={value.id}>{value.value}</MenuItem>
  })
}

另一个重要的事情是，您的 select 具有名称 service_category 并且您具有相同的 onChange 处理程序。

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

上面的代码将更改您的原始状态service_category，仅使用一个选定的值，并且在重新渲染后您将无法在select 中看到任何其他选项。

您必须更改select 的名称。

Answer 2

试试这个：

替换

values.service_category.map((value, id)

收件人：

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

Answer 3

首先你可以替换

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

与

function getServices() {
    return service_category;
}

在render 的ServiceRequestForm 中 代替 const values = { service_category }; 它被包裹在 object 中

你可以const values = service_category;

Answer 4

替换这个：

const values = { service_category},

有了这个

const values = [ ...service_category ]

Answer 5

这里有很多错误。

您将service_category 包装在object 中

const { service_category } = this.state;
const values = { service_category }; <--

只需将service_category 作为values prop 从ServiceRequestForm 传递到ServiceCategoryForm

const { service_category } = this.state;

return (
  <ServiceCategoryForm
    values={service_category}
  />
);

然后在ServiceCategoryForm 中迭代values

{values.map(({ value, id }) => (
  <MenuItem value={value} key={id}> 
    {value}
  </MenuItem>
))}

现在在您选择一个项目后导致崩溃的原因是您将this.state.service_category 设置为handleChange 到e.target.name 中的选定值

您需要将名称更改为 chosenCategory 之类的名称，并将其添加到您的状态中并更改 inputProps name property。

Working SandBox