html - 如何使用 reactjs 和 axios post 动态添加字段帖子

Question

我正在使用 reactjs 和 axios 进行动态添加字段数据提交。它工作正常，但是当我想添加更多字段然后添加的字段时，它只在一个字段上工作，但是当我放置我的数据并想要发布数据时，只有一个字段工作。我正在使用 react 和 axios post 提交我的表单。

我的代码

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)
        this.state = {
          faqList:[{index: Math.random(), question:'', answer: ''}],
        //   question: '',
        // answer: '',
        questions: ['hello']
    
    }
    
    this.state = { values: [{question: '',response: ''}] };
    this.handleSubmit = this.handleSubmit.bind(this);
    }
    
    
      componentDidUpdate(){
        setTimeout(() => this.setState({errorMessage:''}), 40000);
        setTimeout(() => this.setState({sucessMessage:''}), 40000);
      }
    
    
    
    
    
      uploadDocument = (e) => {
        console.log(e); 
      }
    
    
    
      handlequestionChange = event => {this.setState({ question: event.target.value })}
      handleanswerNameChange = event => {this.setState({ answer: event.target.value })}
        
      handleSubmit = event => {
        event.preventDefault();
        event.target.reset()
    
        // const openDate = {userid: this.state.openDate};
        // const closeDate = {fullname: this.state.closeDate};
        // const listingDate = {usergroup: this.state.listingDate};
    
    
        axios.post('https://api.com/api/faqs',
          { 
            ipoId: '328',
            faqList:[
             { question: this.state.question, 
              answer: this.state.answer,
             }
            ]
          }
            )
    
          .then(res => {
            console.log(res);
            console.log(res.data);
            console.log('thank you')
            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">
    <TextField type="text" label="question"  name="question" onChange={this.handlequestionChange}/>
    </div> 
    <div className="formW">
    <TextField type="text" label="answer"  name="answer" onChange={this.handleanswerNameChange}/>
    </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: '',response: '',}]}))
     }
     
     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.bind(this)}/> 
              {/* <div className="form-btn formW">
      <Button
                      size="small"
                      variant="contained"
                      className=""
                      color="primary"
                      onClick={this.addClick.bind(this)}
                    >
                      <AddIcon/>
                    </Button>
                    </div> */}
    
      {/* <div>file<TradeImportComponent/></div> */}
      {/* <button type="submit" color="primary">Add</button> */}
      <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;

截屏

标签： htmlreactjsaxios

Answer 1

为什么要使用this.state两次？React 中的每个类组件只有 1 个state。所以首先，你应该更正你的状态定义。此外，您的values状态是一个数组。因此，当您想通过 编辑问题/答案或发布数据时axios，您应该使用整个values数组。

还有一些问题您应该自己回答以获得更清晰的代码。我实施了一些一般性更改，并在下面的代码中评论了这些问题。回答他们并根据他们的回答更改代码，以便您的代码正常工作。

import axios from 'axios';
import React from 'react';
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)
    // What is defference between faqList and values? Could'nt you use just one of them? and build the other one from another one (whenever needed)?  
    this.state = {
      faqList:[{index: Math.random(), question:'', answer: ''}],
      values: [{question: '',response: ''}]
    }

    this.handleSubmit = this.handleSubmit.bind(this);
  }


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



  uploadDocument = (e) => {
    console.log(e);
  }



  handleQuestionChange = (event, index) => {
    const faq = this.state.values
    faq[index].question = event.target.value
    this.setState(faq)
  }
  handleAnswerNameChange = (event, index) => {
    const faq = this.state.values
    faq[index].answer = event.target.value
    this.setState(faq)
  }

  handleSubmit = event => {
    event.preventDefault();
    event.target.reset()


    // What is ipoId? Is it different from the `index` field in `this.state.faqList`?
    axios.post('https://api.com/api/faqs',
      {
        ipoId: '328',
        faqList:this.state.value
      }
    )

      .then(res => {
        console.log(res);
        console.log(res.data);
        console.log('thank you')
        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">
          <TextField type="text" label="question"  name="question" onChange=(e, i) => {this.handleQuestionChange(i)}/>
        </div>
        <div className="formW">
          <TextField type="text" label="answer"  name="answer" onChange=(i) => {this.handleAnswerNameChange(e, i)}/>
        </div>

        {
          i ?
            <button type="button"  className="button remove" onClick={() => this.removeClick(i)}><CloseIcon /></button>
            : null
        }
      </div>
    )
  }


  addClick(){
    this.setState(prevState => ({ values: [...prevState.values, {question: '',response: '',}]}))
  }

  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.bind(this)}/>
          {/* <div className="form-btn formW">
             <Button
               size="small"
               variant="contained"
               className=""
               color="primary"
               onClick={this.addClick.bind(this)}
              >
                 <AddIcon/>
              </Button>
            </div> */}

            {/* <div>file<TradeImportComponent/></div> */}
            {/* <button type="submit" color="primary">Add</button> */}
            <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;