Я рассмотрел другие вопросы, такие как:
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
*/
Обратите внимание, что я использовал базовое приложение npx create-response-app, поэтому html является основным шаблоном с приложением div с идентификатором и т. Д. Я могу показать это тоже, если необходимо, но в шаблоне ничего не изменилось.
Проблемы:
После того, как запрос на выборку сделан в componentDidMount, начальное состояние prop assignmentsJSON должно получить все данные JSON из конечной точки, указанной в выборке.
Однако во всех console.logs просто указано, что this.state.assignmentsJSON либо только [], либо undefined.
Даже если я долго жду, начальное состояние никогда не обновляется.
Я также пробовал использовать другую конечную точку URL для выборки, например. https://api.imgflip.com/get_memes, но проблема сохраняется
Другое начальное состояние, headerImg, работает полностью нормально.
Мы будем благодарны за любое понимание, я тоже терпеливый разработчик, поэтому, пожалуйста, дайте рекомендации, и я приму внимание.
Я пробовал, как показано выше, в частности,
this.setState({
assignmentsJSON: assignments,
}, () => {
console.log(this.state.assignmentsJSON);
})
но, к сожалению, журнал консоли просто не определен.
Затем это вызывает проблемы, когда используется .map, а .map не будет работать с undefined и т. Д.
Заранее большое спасибо всем, кто может помочь.
response.items.assignments
? - person HMR   schedule 05.05.2020