使用setState获得太多重新渲染 [英] using setState getting Too many re-renders

问题描述

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

I have a dropdown for selecting verified,unverified and all events I'm currently implementing the verified event section when I use setEvents to change the value of events I'm running into too many renders error

Event.js

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

here this part of code is responsible in handling the setting of state,I'm checking if the data is fetched from the server then changing value of 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

推荐答案

您已经添加了 events 作为对 useEffect 的依赖，并且正在调用您的 useEffect 中的setevents .这会导致渲染的无限循环，因为每次 setevents 设置您的 event 时，都会触发 useEffect 并再次调用 setevents

You've added events as a dependency to your useEffect and you're calling setevents within your useEffect. This causes an endless loop of rendering because each time setevents sets your event, useEffect gets triggered and calls setevents again.

这篇关于使用setState获得太多重新渲染的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！