antd和axios中如何给客户数据赋值

Question

如何在antd和axios中对客户数据赋值

https://ant.design/components/form/ 输入不允许我更改将由 axios 更新的数据 我必须仍然能够修复它。 我想展示 Antd 表单数据。我阅读了评论并使用了 initialValues 但我仍然不能。

componentDidMount () {
  let id = this.props.match.params.id;
  httpClient
      .get(`http://localhost:8085/api/v1/customer/customer/${id}`)
      .then((e) => this.setState({ 
            cus_fname: e.data.cus_fname,
            cus_lname: e.data.cus_lname,
            cus_email: e.data.cus_email,
            cus_tel: e.data.cus_tel,
            cus_car_number: e.data.cus_car_number,
            cus_band: e.data.cus_band,
            cus_address: e.data.cus_address,
       }));
}
  onFinish = async(values) => {
    // console.log("ค่า values ที่มาจาก form: ", values);
    const formData = new FormData();
      formData.append("cus_fname", values.cus_fname);
      formData.append("cus_lname", values.cus_lname);
      formData.append("cus_email", values.cus_email);
      formData.append("cus_tel", values.cus_tel);
      formData.append("cus_car_number", values.cus_car_number);
      formData.append("cus_band", values.cus_band);
      formData.append("cus_address", values.cus_address);
    await httpClient
      .put(`http://localhost:8085/api/v1/customer/customer/`, formData )
      .then((res) => {
        // console.log(res.data);
        // console.log( "PushData to server success : ", res);
      }).catch((error) => {
        console.log("Error :", error);
      });
    await this.props.history.goBack();
  };

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

  render() {
      const { fname, lname, email, phone, band, cus_address, car_number} = this.state;
   return (
         <Form {...layout} name="nest-messages" onFinish{this.updateCustomer}  >
                  <FormItem
                    label="ชื่อ"
                    name="fname"
                    defaultValue={fname} 
                    rules={[{ required: true, message: "โปรดระบุชื่อ ", }]}
                    onChange={this.handleChange}
                  > 
                    <Input  />
                  </FormItem>



)

Answer 1

initialValues 将仅在第一次渲染时显示状态值，即使您执行了 setState，它也不会更改 componentDidMount 上的表单值，因为这将是第二次渲染.. 要实现它，您需要对表单的引用和使用实例的api。

//create instance
formRef = React.createRef();

componentDidMount () {    
    let id = this.props.match.params.id;
    httpClient
        .get(`http://localhost:8085/api/v1/customer/customer/${id}`)
        .then((e) => {

            this.formRef.current.setFieldsValue({
                cus_fname: e.data.cus_fname,
                cus_lname: e.data.cus_lname,
                cus_email: e.data.cus_email,
                cus_tel: e.data.cus_tel,
                cus_car_number: e.data.cus_car_number,
                cus_band: e.data.cus_band,
                cus_address: e.data.cus_address,
            });

            //you can still do a setState
            /*this.setState({ 
                cus_fname: e.data.cus_fname,
                cus_lname: e.data.cus_lname,
                cus_email: e.data.cus_email,
                cus_tel: e.data.cus_tel,
                cus_car_number: e.data.cus_car_number,
                cus_band: e.data.cus_band,
                cus_address: e.data.cus_address,
           });*/
        })
  }

在表单组件中：

  <Form  ref={this.formRef} {...layout} name="nest-messages" onFinish={this.updateCustomer} >
      ...
  </Form>

请注意，antd 文档中的

组件上没有 onChange 回调。如果您想在每次更改时更改状态，请使用表单的 onValuesChange 道具。

<Form onValuesChange={(changedValues, allValues) => {
      /* perform setState */
}}>
</Form>

您可能还想查看此link 了解更多信息。