Сохранение всего значения состояния сразу

Я пытаюсь сохранить 3 разных значения состояния (категория, подкатегория, квадратные футы) одновременно в одном состоянии и сохранить их вместе в базе данных. У меня есть 3 разных функции для 3 разных состояний. Прямо сейчас я сделал 3 запроса axios для 3 разных функции:

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

};


saveValue = (e) => {
    console.info('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.info('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,
    }, {})
};



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

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


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



    }

Но я не могу передать все это значение в последнем состоянии и сохранить его сразу.

reactjs state

11.07.2019 07:52

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Массив зависимостей в React

Все о массиве Dependency и его связи с useEffect.

Компонент против элемента в ReactJS - секрет оптимизации производительности за счет повторного использования элементов

Проще говоря, компонент - это фабрика для создания элементов.

Руководство по использованию хука useEffect для методов жизненного цикла React

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Проверьте, передаете ли вы правильные имена состояний. Попробуйте что-нибудь вроде этого

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

передать все данные о состоянии сразу вместо 3 разных вызовов. Если эти 3 значения взяты из полей ввода, вы можете связать значения с таким состоянием.

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

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

11.07.2019 08:18

Ответ принят как подходящий

Предоставьте свойство 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>

11.07.2019 08:29

Другие вопросы по теме

Formik и React Native: обновить родительское значение

This.state возвращает только 1 элемент, в журнале консоли я вижу 2

Разница между использованием хука useState и объявлением переменной

Uncaught TypeError: this.state.map не является функцией

React рендерит перед обновлением компонента

Как изменить состояние компонента с помощью setstate

Неверный тип реквизита: неверный реквизит `preferences[19].category со значением `MemberBenefitInterests`, указанный для `SettingsPage`

Действия по деструктуризации в Nested Redux Reducer

Открытие модального окна с использованием NGX и управления состоянием

Как лучше всего использовать состояние редукции внутри компонентов?

Сохранение всего значения состояния сразу

Ответы 2

Другие вопросы по теме

Похожие вопросы