Question

嗨，我正在尝试更新React组件，该组件不起作用。当用户单击同级组件上的按钮时，对我的api发出了发布请求。该组件的目的是通过以下方式创建这些事件的列表：

首先在我的api中查询发布的事件ID
然后通过事件ID进行循环，并针对每个事件向外部api发出提取请求，该事件始终会更新事件的信息。
从外部api查询每个事件时，结果将推送到一个空数组
最后，当将新事件推入数组时，将设置状态。

这是有效的，但是当将新事件保存到我的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){
            return true
        }
    }

在您的情况下，ComponentComponentUpdate不会返回true，因为旧的userEvents和新的userEvents不同并且逻辑不正确。尝试将其更改为：

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

Answer 2

我现在意识到我的逻辑中有错误，因此我将上面的代码修改为以下代码，现在更新了我的代码（具有无限循环，但确实会更新）

来自：

shouldComponentUpdate（nextProps，nextState）{ if（this.state.userEvents === nextState.userEvents）{ 返回真 }

收件人：

shouldComponentUpdate（nextProps，nextState）{ if（this.state.userEvents！== nextState.userEvents）{ 返回真 }

Answer 3

无限循环是由componentDidUpdate再次获取数据引起的，setState导致再次调用componentDidUpdate并加载数据，该数据再次调用setState。删除componentDidUpdate或添加条件逻辑（如果您真的需要（几乎从不需要））应该对其进行修复。

提取请求后如何更新ReactJS组件？

3 个答案: