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的{{1}}设置为选定的值

您将需要将名称更改为类似e.target.name的名称，并在您的状态下将其添加并更改chosenCategory。

Working SandBox

Answer 3

首先您可以替换

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

与

function getServices() {
    return service_category;
}

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

中

您可以object

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

无法正确设置状态

5 个答案: