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

Привет, Я пытаюсь обновить реагирующий компонент, который не работает. Когда пользователь нажимает кнопку на дочернем компоненте, на мой 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

javascript,reactjs,fetch,

0

Ответов: 3


0

Вот,

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

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

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

0

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

из:

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

чтобы:

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


0

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

JavaScript, reactjs, принеси,
Похожие вопросы