使用 setState 获得太多的重新渲染

Question

我有一个用于选择已验证、未验证和所有事件的下拉菜单 我目前正在实施已验证的事件部分 当我使用 setEvents 更改事件的值时，我遇到了太多渲染错误

Event.js

import EventList from '../components/EventList'
import React, { Component ,useEffect,useState} from 'react'
import Selector from '../components/Selector';
import Navbar from '../../shared/components/navigation/Navbar';

// export class Event extends Component {

// constructor(props) {
//     super(props);
//     this.state = {
//         eventType:'ALLEVENTS',
//         events:{},
//     };
//     this.handelChange = this.handelChange.bind(this)
// }
//     handelChange = (e)=>{
//         this.setState({eventType:e.target.value})
//     }

//     filteredEvents=[]

//     render() {

//             const sendRequest = async () => {
//               try {
//                 const response = await fetch('http://localhost:5000/api/events');
          
//                 const responseData = await response.json();
//                 this.setState({events:responseData})

//                 if (!response.ok) {
//                   console.log("error")
//                 }
          
//               } catch (err) {
//                 console.log(err);
//               }
//             };

//             sendRequest();
        
//     const currentEventType = this.state.eventType;


//     if(currentEventType === 'VERIFIED'){
//         this.filteredEvents = this.state.events.filter(event =>event.verified === true);
//     }
//     else if(currentEventType === 'UNVERIFIED'){
//         this.filteredEvents = this.state.events.filter(event =>event.verified === false);
//     }
//     else{
//         this.filteredEvents = this.state.events;
//         console.log(this.state.events)
//         console.log("hhiiiiiiiiiiii")
//     }

//     return (
//         <React.Fragment>
//             <Navbar/>
//             <Selector handelChange={this.handelChange}/>
//             <div>
//             <EventList events={this.state.events} />
//             </div>
//         </React.Fragment>
//         )
//     }
// }

// export default Event

// import React from 'react'

const Event = () => {

    const [eventType,seteventType] = useState('ALLEVENTS');
    const [filteredEvents,setfilteredEvents] = useState();
    const [events,setevents] = useState([]);
    const [isLoading,setisLoading] = useState(true);

    const handelChange = (e)=>{
        console.log(e.target.value)
        seteventType(e.target.value)
    }

    useEffect(() => {
    const sendRequest = async () => {
        try {
          const response = await fetch('http://localhost:5000/api/events');
    
          const responseData = await response.json();
          
          console.log(responseData)
          console.log("responseData")

          if (!response.ok) {
            console.log("error")
          }
        console.log(responseData)
        setevents(responseData)
        setisLoading(false)
    
        } catch (err) {
          console.log("errrrrrroooooooorrrrrrr");
          console.log(err);
        }
      };
      sendRequest();
    },[]);
  
    // const currentEventType = this.state.eventType;
    if(isLoading === false){
        if(eventType === 'VERIFIED'){
            console.log("verified")
            console.log(events['events'])
            setevents(Array.isArray(events['events']) ? events['events'].filter(event =>event.verified === true) : []);
        }
}
    else if(eventType === 'UNVERIFIED'){
        events.filter(event =>event.verified === false);
    }
    else{
        console.log(events)
        // setfilteredEvents(events);
    }


    return (
        <React.Fragment>
            <Navbar/>
           
            <Selector  handelChange={handelChange}/>
            <div>
                {!isLoading &&
            <EventList events={events} />}
            </div>
        </React.Fragment>
    )
}

export default Event

这部分代码负责处理状态的设置，我正在检查是否从服务器获取数据然后更改isLoading的值

 if(isLoading === false){
        if(eventType === 'VERIFIED'){
            console.log("verified")
            console.log(events['events'])
            setevents(Array.isArray(events['events']) ? events['events'].filter(event =>event.verified === true) : []);
        }
}

沙盒链接 https://codesandbox.io/s/jovial-merkle-2bprs?file=/src/user/pages/Auth.js

Answer 1

您已将events 添加为useEffect 的依赖项，并且您在useEffect 中调用setevents。这会导致无限循环的渲染，因为每次setevents 设置您的event，useEffect 都会被触发并再次调用setevents。