this.setState не обновляет свойство инициализированного состояния, которое является массивом, несмотря на использование componentDidMount - PullRequest
Новая
       75

this.setState не обновляет свойство инициализированного состояния, которое является массивом, несмотря на использование componentDidMount

0 голосов
/ 05 мая 2020

Я рассмотрел другие вопросы, например:

this.setState не обновляет свойство состояния

this.setState не обновляет состояние

Я понимаю, что setState является асинхронным.

Это мой код: 

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

class AssignmentTracker extends React.Component {
  constructor() {
      super()
      this.state= {
         assignmentsJSON : [ ],
         headerImg: "https://poster.keepcalmandposters.com/8738135.jpg"
      }
  }

  componentDidMount() {
    fetch('https://beehiveapi.lionhearttrust.org.uk/v3.5/planner/test/assignments?pageIndex=0&pageSize=20')
    .then(response => response.json())
    .then(response => {

          const {assignments} = response.items
          this.setState({
            assignmentsJSON: assignments,
          }, () => {
              console.log(this.state.assignmentsJSON);
            }) 
        })
  }

  render() {
      if (this.state.assignmentsJSON) {
        var assignmentListItems = this.state.assignmentsJSON.map((data)=> <li key={data.id}>{data.title}</li>);
        console.log(this.state.assignmentsJSON)
      }
      return (
          <div className="row">
              <header>
                  <img className="center-block img-responsive w-25" src={this.state.headerImg} alt="Keep Calm and Do Your Assignment" />
                  <h1 className="text-center">Homework Assignment Tracker</h1>
              </header>

              <div className="col-md-6 assignment-items">
                <ul>
                  {assignmentListItems}
                </ul>
              </div>

              <div className="col-md-6">
                <h1> TESTIN'PLACEHOLDER </h1>
              </div>
          </div>
      )
  }
}

ReactDOM.render(
  <AssignmentTracker/>,
  document.getElementById('root')
);




/* Developer Notes Taken Whilst this app was being made 

1- Use of CSS Input Checked in order to show assignments when clicked
2- Need to determine if radio buttons or check boxes are best for 1 
3- Dev thinks a good sense of humour is good for teamwork and even better in a education environment
4- Due to 3, an image has been selected appropiately
5- Initialise state to have data called assignmentsJSON, an array that can take in JSON data via fetch GET request done in React lifecycle method
componentDidMount() 
6- Re-factor img src of image selected in 3 to make use of initialising state, data called headerImg
7- Radio buttons for 2 would be better - if it were to look like an email UI then one at a time only
8 - Given URL endpoints not working unfortunately, have emaled Graham
9 - Using a meme api instead in the mean time
10- Use .map to loop through and display assignmentJSON prop in state after the array has been filled due to fetch in lifecycle hook
11- Hence, display each list item by 10's .map loop
*/

Обратите внимание, что я использовал приложение basi c npx create-response-app, поэтому html - это базовый шаблон c с div с id app et c. Я могу показать это тоже, если необходимо, но в шаблоне ничего не изменилось.

Проблемы:

После того, как запрос на выборку сделан в componentDidMount, начальные назначения свойств JSON должны получить все данные JSON из конечной точки, указанной в выборке.

Однако во всех console.logs просто указано, что this.state.assignments JSON либо только [], либо undefined.

Даже если я долго жду, начальное состояние никогда не обновляется.

Я также пробовал использовать другую конечную точку URL для выборки, например, https://api.imgflip.com/get_memes, но та же проблема сохраняется

Другое начальное состояние, headerImg, работает совершенно нормально.

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

Я специально пробовал, как показано выше, 

this.setState({
            assignmentsJSON: assignments,
          }, () => {
              console.log(this.state.assignmentsJSON);
            })

, но, к сожалению, журналы консоли просто не определены.

Это затем вызывает проблемы при использовании .map и .map не будет работать на undefined et c.

Заранее большое спасибо всем, кто может помочь.

1 Ответ

1 голос
/ 05 мая 2020

Ваша проблема здесь:

const {assignments} = response.items

Измените его на: const {items] = response;

Вы пытаетесь деконструировать атрибут из несуществующего объекта . Эти маленькие фигурные скобки означают «Эй, давай мне задания из response.items». В вашем ответе нет атрибута с именем assignments. Только предметы и перелистывание. JSON возвращает следующее object: {items: Array[20], paging: Object}.

. Вы можете войти в консоль и проверить свой объект следующим образом. 

const { items } = response;
console.log(response);

Это пригодится, когда вы пытаетесь посмотреть на объект подкачки в вашем ответе.

...