Как обновить компонент ReactJS после запроса на выборку?

Question

Привет. Я пытаюсь обновить компонент реагирования, который не работает. Когда пользователь нажимает кнопку на одном из компонентов, на мой API поступает запрос на публикацию. Целью этого компонента является создание списка этих событий по:

1. Сначала запросите мой API для идентификаторов опубликованных событий
2. Затем выполните цикл по идентификаторам событий и для каждого сделайте запрос на выборку для внешнего API, где информация о событиях всегда обновляется.
3. Поскольку каждое событие запрашивается из внешнего API, результаты помещаются в пустой массив
4. и, наконец, состояние устанавливается, когда в массив помещается новое событие.

Это работает, но когда новое событие сохраняется в моем API, этот компонент не будет повторно отображаться. Вот мой код, который не обновляется:

class EventList extends Component {

constructor(props){
    super(props)
    this.state = {
        userEvents: []
    }
}

//Create a function to load active user's saved events in api
loadEvents = () => {
    const ActiveUser = JSON.parse(localStorage.getItem("ActiveUser"))

    //Get active user's events from vetharbor.json
    fetch(`http://localhost:8088/events?userId=${ActiveUser.id}`)

    //convert get to json data
    .then(r => r.json())

    .then(allEvents => {
        let events = []
        //for each event tied to active user's id, loop thru and ...
        allEvents.forEach(event => {

            //make a fetch request to eventbrite with the event's id
            fetch(`https://www.eventbriteapi.com/v3/events/${event.id}/?token=MY_API_Token`)

            //convert response to json
            .then(r => r.json())

            //return the data???
            .then(ue => {
               events.push(ue)
               // this.userEvents = events
                this.setState({
                    userEvents: events
                })
            })
        }) 
    })
}

    shouldComponentUpdate(nextProps, nextState){
    if(this.state.userEvents !== nextState.userEvents){
        return true
    }

}

componentDidUpdate(){
    this.loadEvents()
}

//run the function in a component did mount
componentDidMount(){
    console.log("component did mount")
    this.loadEvents()
}

render() {

    return (
        <div className="event-list">
        <h3>These are events</h3>
        {this.state.userEvents.map(ues => {
           return <h1 key={ues.id}>{ues.name.text}</h1>
        })}

        </div>
        );

    }
}

export default EventList

Answer 1

Теперь я понимаю, что в моей логике произошла ошибка, в результате я изменил свой код, приведенный выше, к следующему, который теперь обновляет мой код (с бесконечным циклом, но он обновляется)

из:

shouldComponentUpdate (nextProps, nextState) {if (this.state.userEvents === nextState.userEvents) {вернуть true}

в:

shouldComponentUpdate (nextProps, nextState) {if (this.state.userEvents! == nextState.userEvents) {return true}

Answer 2

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

Answer 3

Здесь

    shouldComponentUpdate(nextProps, nextState){
        if(this.state.userEvents === nextState.userEvents){
            return true
        }
    }

В вашем случае shouldComponentUpdate не возвращает true, поскольку старые userEvents и новые userEvents различаются, а логика неверна. Попробуйте изменить его на:

if(!(this.state.userEvents).equals(nextState.userEvents)){
                return true
}