如何使用ReactJS和Axios实现动态添加表单字段并提交POST请求

你的代码存在3个核心错误导致仅第一个字段能提交：

• 构造函数中重复对this.state赋值，第一次声明的状态被完全覆盖，且存储动态字段的values数组中字段名为response，和提交时用到的answer字段不匹配
• 动态生成的输入框绑定的是全局的handlequestionChange、handleanswerNameChange方法，这两个方法只会往state中写入单个question和answer值，新增字段的输入内容根本不会被存储到values数组对应位置
• 提交POST请求时，faqList只传入了单个固定对象，没有把存储了所有动态字段内容的values数组传入

import React from 'react';
import axios from 'axios';
import { Grid, Button } from "@material-ui/core/";
import Alert from '@material-ui/lab/Alert';
import CloseIcon from "@material-ui/icons/Close";
import TextField from "@material-ui/core/TextField";
import AddIcon from '@material-ui/icons/Add';

class FaqPage extends React.Component<{},any>{
  constructor(props) {
    super(props)
    // 合并state声明，统一字段名
    this.state = {
      faqList:[{index: Math.random(), question:'', answer: ''}],
      questions: ['hello'],
      values: [{question: '',answer: ''}], // 把response改为answer和提交字段匹配
      errorMessage: '',
      sucessMessage: ''
    }
    this.handleSubmit = this.handleSubmit.bind(this);
    this.handleChange = this.handleChange.bind(this);
    this.addClick = this.addClick.bind(this);
    this.removeClick = this.removeClick.bind(this);
  }

  componentDidUpdate(){
    setTimeout(() => this.setState({errorMessage:''}), 40000);
    setTimeout(() => this.setState({sucessMessage:''}), 40000);
  }

  uploadDocument = (e) => {
    console.log(e); 
  }
    
  handleSubmit = event => {
    event.preventDefault();
    event.target.reset()

    axios.post('https://api.com/api/faqs',
      { 
        ipoId: '328',
        faqList: this.state.values // 直接传入所有动态字段的数组
      }
    )
    .then(res => {
      console.log(res);
      console.log(res.data);
      this.setState({sucessMessage: res.data});
    })
    .catch(err => { 
      this.setState({errorMessage: err.message});
    })
  }

  createUI(){
    return this.state.values.map((el, i) => 
        <div key={i} className="commonInput">
          <div className="formW">
            {/* 绑定带索引的handleChange，设置id为对应字段名 */}
            <TextField type="text" label="question"  id="question" onChange={(e) => this.handleChange(i,e)}/>
          </div> 
          <div className="formW">
            <TextField type="text" label="answer"  id="answer" onChange={(e) => this.handleChange(i,e)}/>
          </div> 
          {
            i ? 
              <button type="button"  className="button remove" onClick={() => this.removeClick(i)}><CloseIcon /></button> 
            : null
          }
        </div>          
    )
 }


  handleChange (i,event) {
    let values = [...this.state.values];
    values[i][event.target.id] = event.target.value;
    this.setState({ values }); 
 }
 
 addClick(){
   this.setState(prevState => ({ values: [...prevState.values, {question: '',answer: '',}]}))
 }
 
 removeClick(i){
    let values = [...this.state.values];
    values.splice(i,1);
    this.setState({ values });
 }

 componentDidMount() {
  axios.get(`https://api.com/api/get/all`)
 .then(res => {
    const posts = res.data;
    this.setState({ posts });
   })
 }

  render() {
    return (
      <Grid className="CoomonT">
        <div className="clapse ">
          <form onSubmit={this.handleSubmit}>
          <br/>
            {this.createUI()}        
            <input type='button' value='add more' onClick={this.addClick}/> 
            <div className="form-btn formW">
            <Button
              size="small"
              variant="contained"
              className=""
              color="primary"
              type="submit"
              disableElevation
            >
              Submit
            </Button>
            </div>
          </form>
        </div>
      </Grid>
    )
  }
}
export default FaqPage;

内容的提问来源于stack exchange，提问作者govind jha