Question

我试图在一个状态中一次存储3个不同的状态值（类别，子类别，平方尺），并将它们一起保存在数据库中。我对3个不同的状态有3种不同的功能。现在我提出了3个axios请求3种不同的功能：

 this.state = {
    apiUrl: config.publicRuntimeConfig.publicRuntimeConfigValue.apiUrl, 
    categoryName:'',
    subCategoryName:'',
    squareFeet:'',

};


saveValue = (e) => {
    console.log('savecategory', e.target.innerHTML);

    this.setState({
        category: e.target.innerHTML
    }, this.makingAxiosRequest);

};

makingAxiosRequest = () => {
    axios.post( this.state.apiUrl+'/api/v1/LeadSurvey/save', {
        'categoryName':this.state.category,
    }, {})
};
savedValue = (e) => {
    // console.log('savecategory', e.target.innerHTML);

    this.setState({
        subCategory: e.target.innerHTML
    }, this.makeAxiosRequest);

};

makeAxiosRequest = () => {
    axios.post( this.state.apiUrl+'/api/v1/LeadSurvey/save', {
        'subCategoryName':this.state.subCategory,
    }, {})
};



handleChange = value => {
    this.setState({
        value: value
    })
};

savingValue = () => {
    console.log('saveValue ...', this.state);


    axios.post( this.state.apiUrl+'/api/v1/LeadSurvey/save', {
        'squareFeet':this.state.value,



    }

但是我无法在上一个状态下传递所有这些值并立即保存。

Answer 1

检查是否传递了正确的状态名称。试试这样的东西

axios.post(this.state.apiUrl+'/api/v1/LeadSurvey/save', {'categoryName':this.state.categoryName,subCategoryName:this.state.subCategoryName,'squareFeet':this.state.squareFeet});

一次传递所有状态数据，而不是3个不同的调用。如果这三个值是从输入字段中获取的，则可以将这些值与状态绑定在一起。

onChange=(e,{name,value})=>{
  this.setState({[name]:value});
}

<input name="categoryName" onChange={this.onChange}/>

Answer 2

将name属性提供给您的输入或使用的内容，然后调用onChange(e)传递事件属性，并从事件中获取名称，值属性并将其设置为状态如下：

class Thingy extends React.Component {

  constructor(props) {
    super(props)
    this.state = {};
  }
  
  onChange(e) {
    this.setState({ [e.target.name]: e.target.value });
  }
  
  render() {
    const {title} = this.props;
    return (
      <div>
        name
        <input name='name' onChange={(e) => this.onChange(e)}/>
        age
        <input name='age' onChange={(e) => this.onChange(e)}/>
      </div>
    );
  }
}

// Render it
ReactDOM.render(
  <Thingy />,
  document.body
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

一次保存所有状态值

2 个答案: