Javascript 无法管理Reactjs上未填写的字段

我正在用reactjs制作一个动态表单。但我有一个恼人的问题。我只想发送填写的表单字段

为此，我使用了这段代码，它允许我下载所有未填充的数据。 在全球范围内，我的发送部分代码为

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

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

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

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

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

在这段代码中，我从this.state中删除了空的数据，以删除其中没有任何内容的变量

但我的问题是，我不知道如何处理axios.get中字段为空的事实。 我希望能够从get.axios中删除已被删除的变量

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

例如，如果我没有填写name_contact_1字段，我希望axios.get为

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

或者如果我没有在endfr里放任何东西

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

所以我的问题是：有人知道我如何处理这个问题吗？（我的代码结构可能无法实现） 我不确定我是否清楚，但如果我不清楚，告诉我，我会确保我改变它

我的全部代码

  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;
           Object.keys(this.state).forEach(key => {
 if (!this.state[key]) delete this.state[key];
 })
     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>
    );
  }
}

导出默认类FormPage扩展组件{
建造师（道具）{
超级（道具）；
this.state=初始状态；
this.handleSubmit=this.handleSubmit.bind（this）；
this.handleChange=this.handleChange.bind（this）；
}
showMessage=（bool）=>{
设置超时（（）=>{
这是我的国家({
showMessage：正确
});
}, 2000);
如果（本状态显示）返回；
this.setState（{Show:true，Show:true}）；
设置超时（（）=>{
this.setState（{Show:false，Show:false}）；
}, 2000);
}
showMessageFalse=（bool）=>{
这是我的国家({
showMessage:false
});
此.setState（初始状态）；
}
手变（活动）{
const InputValue=event.target.value；
const stateField=event.target.name；
这是我的国家({
[stateField]：输入值，
});
console.log（this.state）；
}
异步handleSubmit（事件）{
this.setState（{loading:true}）；
设置超时（（）=>{
this.setState（{loading:false}）；
}, 2000);
event.preventDefault（）；
常数{
姓名\联系方式=“”，
}=本州；
Object.keys（this.state）.forEach（key=>{
如果（！this.state[key]）删除此.state[key]；
})
等待axios.post(
“我的端点API”，
{
姓名：`${name_contact}`）；
}
render（）{
const{loading}=this.state；
返回(
联系人详细信息

名称：



更新
);
}
}

首先，您需要了解，当您分配值

const{name\u contact=''}=this.state；

之后，您将

删除此.state['name\u contact']

，就像上面所做的那样，实际上没有更改

name\u contact

变量的值。您更改了状态内部的值，但没有更改值本身

其次，javascript无法神奇地为您创建

名称

字符串，只有在有2个值时才使用逗号。您必须编写一个函数来实现这一点

类似于

var name=[name\u contact，name\u contact1].filter（v=>v）.join（'，'）；

函数从数组中去除空值，

.join

将其转换为值之间带有逗号的字符串

所以你最终会得到更像这样的结果：

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

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

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


 const name = [name_contact, name_contact1].filter(v =>v).join(',');
 const end = [name_contact, name_contact1].filter(v =>v).join(',');

 await axios.post(
  ' MY_endpoint API',
  {
    name, end
  })
}

---

首先，您需要了解，当您分配值

const{name\u contact=''}=this.state；

之后，您将

删除此.state['name\u contact']

，就像上面所做的那样，实际上没有更改

name\u contact

变量的值。您更改了状态内部的值，但没有更改值本身

其次，javascript无法神奇地为您创建

名称

字符串，只有在有2个值时才使用逗号。您必须编写一个函数来实现这一点

类似于

var name=[name\u contact，name\u contact1].filter（v=>v）.join（'，'）；

函数从数组中去除空值，

.join

将其转换为值之间带有逗号的字符串

所以你最终会得到更像这样的结果：

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

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

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


 const name = [name_contact, name_contact1].filter(v =>v).join(',');
 const end = [name_contact, name_contact1].filter(v =>v).join(',');

 await axios.post(
  ' MY_endpoint API',
  {
    name, end
  })
}

---

简单地说，这个方法的问题是，如果我不使用const name=[name\u contact，name\u contact1].filter（v=>v.join（'，'）中的任何值，axios将不会发送任何内容。例如，如果我没有在输入的name_contact和name_contact1中输入任何内容，则发送将不起作用。但是如果我只在name_contact中输入内容，则工作正常。我不明白问题所在。您在服务器端接受某些值时有问题吗？不是这样，只是，如果我输入与name对应的字段中没有任何内容，它将取消所有axios的发送，而不仅仅是取消name的发送。您是否尝试设置断点以确定在这些条件下

name

变量的值是多少？是否为空？是否引发javascript错误？好的，那么我的lambda日志中的错误是“”errorMessage:“一个或多个参数值无效：AttributeValue可能不包含空字符串”，“我认为这只是Dynamodb的问题。但它发送信息，所以问题不在您的代码中。Thxlittle问题很快，此方法的问题是，如果我在const name=[name\u contact，name\u contact1]。筛选器（v=>v）。加入（“，”），axios将不会发送任何内容。例如，如果我没有在输入的name_contact和name_contact1中输入任何内容，则发送将不起作用。但是如果我只在name_contact中输入内容，则工作正常。我不明白问题所在。您在服务器端接受某些值时有问题吗？不是这样，只是，如果我输入