ReactJS не отображает результаты моего вызова API

Question

В React у меня есть состояние, называемое views_res, которое является списком.Я делаю вызов API в viewsList (), который должен отображать результаты вызова API в эту переменную состояния.Однако, когда я отлаживаю с помощью console.log (), я вижу «start» и «WHAT UP DOE», но представления пустые: (

Я знаю, что конечная точка API верна, как почтальонпоказывает правильный ответ JSON. Однако моя переменная состояния просто не получает данные. Я не уверен, где я ошибаюсь с этим!

Для конфиденциальности я отредактировал точную конечную точку API.

componentDidMount() {
    this.ViewsList();
  }

  // Gets views from Wistia API
   ViewsList() {
    console.log("start", this.state.views);
// API call
$.getJSON(
  "url"
)
  // JSON format
  .then(response => {
    response.json();
  })
  .then(data => {
    // Map over data
    let views_res = data.response.map(item => (
      <div>
        console.log("play_count", {item.play_count})
        <h1>{item.play_count}</h1> */}
      </div>
    ));
    // Set the state
    this.setState({ views: views_res });
  });
console.log("WHAT UP DOE", this.state.views);
  }

Answer 1

Я не уверен, какую библиотеку вы используете для $.getJson (это jQuery?), Но учтите, что setState - это асинхронная операция .Это означает, что вы хотите «увидеть» изменения, если вы console.log после того, как вы вызвали setState.
Хотя есть и второй аргумент для setState, который является функцией обратного вызова, которая сработает после фактического обновления состояния.,

this.setState({ views: views_res }, () => {
    // this is a callback function for setState.
  // this coode will run just after the state actually updated
  console.log("WHAT UP DOE", this.state.views)
})

Из DOCS:

setState () не всегда сразу обновляет компонент.Это может пакетировать или отложить обновление до позже.Это делает чтение this.state сразу после вызова setState () потенциальной ловушкой.Вместо этого используйте componentDidUpdate или обратный вызов setState (setState (Updater, callback)), любой из которых гарантированно сработает после применения обновления

Редактировать
Примечаниечто эта часть:

<div>
  console.log("play_count", {item.play_count})
  <h1>{item.play_count}</h1> */}
</div>

не будет ничего регистрировать, так как

console.log("play_count", {item.play_count})

- это просто строка внутри блока JSX.Если вы хотите написать выражения JavaScript внутри блока JSX, вам следует заключить его в фигурные скобки ({}):

См. Работающий пример:

function App() {
  return (
    <div>
     <div>
        console.log("i am just a string")
        {console.log('I will show in the console')}
      </div>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

<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>
<div id="root">