时间戳

首页 > 解决方案 > 无法在 Reactjs 上仅使用 axios 发送填充的输入

javascript - 无法在 Reactjs 上仅使用 axios 发送填充的输入

问题描述

我在 reactjs 中有一个代码，它使用 axios 发送以表单输入的数据。它工作正常。您在下面的代码与我的架构相同。

export default class FormPage extends Component {
     constructor(props) {
      super(props);
      this.state = initialState;
      this.handleSubmit = this.handleSubmit.bind(this);
      this.handleChange = this.handleChange.bind(this);
     }

     showMessage = (bool) => {
      setTimeout(() => {
       this.setState({
        showMessage: true
       });
      }, 2000);
     if (this.state.Showing) return;
      this.setState({ Show: true, Showing: true });
     setTimeout(() => {
      this.setState({ Show: false, Showing: false });
      }, 2000);
     }

     showMessageFalse = (bool) => {
      this.setState({
       showMessage: false
       });
      this.setState(initialState);
     }

     handleChange(event) {
      const InputValue = event.target.value;
      const stateField = event.target.name;
      this.setState({
        [stateField]: InputValue,
      });
      console.log(this.state);
     }

     async handleSubmit(event) {
      this.setState({ loading: true });

      setTimeout(() => {
       this.setState({ loading: false });
      }, 2000);

     event.preventDefault();
     const {
       name_contact='',
     } = this.state;

     await axios.post(
      ' MY_endpoint API',
      {
        name: `${name_contact}`);
      }

  render() {

    const { loading } = this.state;

    return (
      <div>

        <ExpansionPanel title="Contacts" expandedTitle="Contacts" titleIcon="done_all" ><div>
          <Container>
            <div id="normal"><label id='title2'>Detail du contact</label></div><br/>
              <Row align="center">
                <Col id= "color" sm={3}> <label> Name: </label></Col> <Col id= "color" sm={3}><Input placeholder="Nom complet" type="string" name="name_contact" value={this.state.name_contact} onChange={this.handleChange}/><br /> </Col>
              </Row>
          </Container>
          </div>
        </ExpansionPanel>

      <form onSubmit={this.handleSubmit}>
      <br /><br /><div id="deb"><Button type="submit" value="Show" onClick={this.showMessageFalse.bind(null, true)} > Update </Button></div>
      </form>
    </div>
    );
  }
}

但是在我的真实代码中，我有很多数据要发送，因为我有很多字段。我想知道是否可以使用这种架构发送，只有变量所在的字段。

event.preventDefault();
 const {
   name_contact='',
 } = this.state;

 await axios.post(
  ' MY_endpoint API',
  {
    name: `${name_contact}`);
  }

例如，我想，如果我的 name_contact 未填写并且我单击“更新”，它不会发送 name_contact 字段，但如果已填写，它会发送它。

如果可以做这样的事情，我应该使用什么？谢谢

标签： javascriptreactjsparametersaxios

解决方案

准备您要发布的对象，遍历键，并删除任何空字段：

 var data = {
    name: 'x',
    position: 'y',
    gender: ''
  }

  Object.keys(data).forEach(key => {
    if (!data[key]) delete data[key];
  })

  console.log(data);

  await axios.post(
      ' MY_endpoint API',
      data)

我实现它的方式只检查虚假值，所以要小心。的值'0'将是真实的，而 的值0将是虚假的

推荐阅读