Состояние React Js не обновляется

#reactjs

Вопрос:

Мое состояние не задано вовремя или не задано вообще. Вот функция, предназначенная для его изменения:

 onChangeHandler(event){
  this.setState({
    selectedFile: event.target.files[0],
    loaded: 0,
    }
      console.log(`this is the state ${this.state.selectedFile}`)
  })

1. какую версию react вы используете? я бы порекомендовал вам ознакомиться с документацией по реализации «новых» хуков reactjs.org/docs/hooks-intro.html 👌

2. Вам не хватает } после loaded: 0, ?

3. setState является асинхронным. Есть много других вопросов по stack overflow, которые задают именно об этом.

4. Другие комментаторы, я думаю, что это может быть опечаткой, и function предполагается, что это часть [callback] подписи setState вызова.

5. Извините, мне придется обновить функцию. На самом деле, я видел решение в stackoverflow, и оно тоже не сработало. Я установлю его в исходный код, который, к сожалению, тоже вызывает те же проблемы.

Ответ №1:

setState является асинхронным, как сказал комментатор. Предоставьте ему обратный вызов, и это сработает:

 onChangeHandler(event){
  this.setState(
    {
       selectedFile: event.target.files[0],
       loaded: 0,
    },
    () => console.log(`this is the state ${this.state.selectedFile}`)
  )
}

Но у меня такое чувство, что вы задали этот вопрос, потому что у вас другая проблема…

1. По сути, это часть проблемы. Я пытаюсь отправить файл setState, предназначенный для обновления в api, но он ничего не отправляет. Моя консоль. журнал, очевидно, показывает, что он тоже не обновляется; так как он всегда отображает начальное значение null.

2. @MarvelousIkechi I'm trying to send the file setState is meant to update to an api, but it doesn't send anything — не ошибитесь, ваше состояние обновляется. Но теперь вы говорите об отдельной проблеме — вы не опубликовали никакого кода, который выполняет запрос API при изменении состояния.

Ответ №2:

У вас была опечатка в вашем коде. Вы пытались использовать сигнатуру обратного вызова setState , но фактически делали функцию частью объекта, который вы установили в новое состояние (что в любом случае должно было вызвать ошибку).

 const {
  Component,
  createElement
} = React;

const {
  render
} = ReactDOM;

class MyComponent extends Component {
  constructor(props) {
    super(props);
  }
  
  /* yours
  onChangeHandler(event){
    this.setState({
      selectedFile: event.target.files[0],
      loaded: 0,
    },
    console.log(`this is the state ${this.state.selectedFile}`)
  }),
  */
  
  /* mine */
  onClickHandler() {
    this.setState(
      {
        count: Date.now()
      }, 
      () => console.log(`State has been set: ${this.state.count}`)
    );
  }
  

  render() {
    return createElement("button", {
      onClick: () => {
        this.onClickHandler();
      }
    }, "Click Me");
  }
}

const App = () => {
  return createElement("div", null,
    createElement(MyComponent)
  );
};

render(
  createElement(App),
  document.getElementById('app')
);

 <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

<div id="app"></div>

Ответ №3:

Используйте функцию обратного вызова для регистрации сообщения. ` //setState(средство обновления, [обратный вызов])

 onChangeHandler(event){
  this.setState({
    selectedFile: event.target.files[0],
    loaded: 0
  },
  console.log(`this is the state ${this.state.selectedFile}`));
}