Почему состояние реакции не обновляется правильно? - PullRequest
Новая
       1

Почему состояние реакции не обновляется правильно?

1 голос
/ 05 апреля 2020

Хорошо, поэтому я создаю это приложение CRUD с U / I, управляемым React. У меня проблема с обновлением моего состояния. Ниже приведены фрагменты кода, которые связаны с проблемой. Я попытался выяснить это сам и думаю, что мое состояние обновляется правильно, но оно отправляется на сервер до того, как состояние может быть обновлено, и когда мой компонент перемонтируется, он получает старое состояние с сервера и перезаписывает новое. Сервер всегда получает состояние от n - 1 до фактического количества элементов. Также, если вы знаете какие-либо способы, которые я мог бы улучшить, пожалуйста, дайте мне знать, что я чувствую, что это большая работа, чтобы выполнить только 3 задачи!

Заранее спасибо.

Мое состояние 

     this.state = {
            newItem:{},
            todos:[]
        }

Методы поиска 

    componentDidMount(){
        this.getTodos(this.props);
    }

    getTodos(props){
        axios.get(process.env.REACT_APP_SERVER+`/${props.match.params.id}/todos`)
        .then(
            (res)=>{
                this.setState({todos:[...res.data]});
            }
        )
    }

Мои методы создания и обновления 

    handleOnChange(e){
        this.setState({newItem:{title:e.target.value, complete:false}});
    }

    addNewItem(){
        this.setState({todos:[...this.state.todos, this.state.newItem]});
        this.updateTodoList(this.props);
    }

    updateTodoList(props){
        axios.put(process.env.REACT_APP_SERVER+`/${props.match.params.id}/todo/add`, this.state.todos).then(res=>{
            console.log(res.data);
        });
    }

Обновление: О, хватит! Это то, что я понял, вы исправили мою ошибку!

Ответы [ 2 ]

0 голосов
/ 05 апреля 2020

Обновление состояния является асинхронным процессом.

Проблема заключается в том, что ваш вызов API обновления происходит до обновления состояния.

Чтобы устранить эту проблему, используйте это синтаксис для обновления состояния. 

addNewItem () {
  this.setState (
    {todos:[...this.state.todos, this.state.newItem]},
    () => {
    this.updateTodoList(this.props);
    }
  );           
}
0 голосов
/ 05 апреля 2020

Проблема в том, что вы звоните updateTodoList до того, как состояние уже обновлено.

Сделайте это: 

addNewItem(){
        this.setState({todos:[...this.state.todos, this.state.newItem]}, () => {
              this.updateTodoList(this.props);
        });
    }

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

...