无法正确设置反应状态

Question

我是新来的反应并尝试与 Material UI 建立关系。以下是我尝试过的代码示例。表单在第一次加载时正确呈现，但当我尝试更改 select 元素时，它显示错误。有人可以指出我做错了什么吗？错误表明 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

试试这个：

替换

values.service_category.map((value, id)

收件人：

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

Answer 2

这里有很多错误。

您正在将 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

Answer 3

首先你可以替换

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

与

function getServices() {
    return service_category;
}

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

你可以const values = service_category;

Answer 4

替换为：

const values = { service_category},

用这个

const values = [ ...service_category ]

Answer 5

与其创建这样的对象，不如

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 的名称。

无法正确设置反应状态

Not able to set state in react properly

setstate

reactjs