提问者:小点点

在render()中没有任何setState的现有状态转换期间无法更新


我正在学习react,我遇到了这个错误,无法找到解决方案。

我收到的错误是:

无法在现有状态转换期间更新(例如在渲染中)。渲染方法应该是道具和状态的纯函数。在客户端显示(http://localhost:3000/static/js/main.chunk.js:672:39)at div at App(http://localhost:3000/static/js/main.chunk.js:163:5)

此代码中存在问题:

import React from 'react'
import Client from './Client/Client'

const clientsDisplay=(props)=>props.clientsArray.map(
    (client,index) =>{
        return <Client
        clientName={client.name}
        clientProjDeadline={client.deadline} 
        clickDel={props.clientDel(index)} 
        key={client.id}
        changed={event=>props.changed(event,client.id)}
        len={props.clArraylength}
        />}
)

export default clientsDisplay

包含渲染函数的主要组件如下所示:

import appCss from './App.module.css';
import React,{Component} from 'react'; 
import ClientsDisplay from './components/ClientHandle/ClientsDisplay';

class App extends Component{

    state = {
        userName:'Julian',
        showPara: false,
        clientsArray: [
            {
                id:"001",
                name: "Max",
                deadline: "2021/05/17"
            },
            {
                id:"002",
                name: "James",
                deadline: "2021/12/06"
            },
            {
                id:"003",
                name: "Johnny",
                deadline: "2021/07/21"
            }
        ]
    }

    deleteClient = (delClientIndex)=>{
        let clientsArrayCopy=[...this.state.clientsArray]
        clientsArrayCopy.splice(delClientIndex,1)
        this.setState({
            clientsArray:clientsArrayCopy
        })
    }
    
    valueChanger = (event)=>{
        this.setState({
            userName: event.target.value
        })
    }

    valueChangerClient = (event,id)=>{
        let targetInd=this.state.clientsArray.findIndex(elem=>elem.id===id)
        let changedClientArray=[...this.state.clientsArray]
        changedClientArray[targetInd].name=event.target.value
        this.setState({
            clientsArray:changedClientArray
        })
    }
    
    togglePara = ()=>{
        this.setState({
            showPara: !this.state.showPara
        })
    }

    render(){
            let clientArraylength=this.state.clientsArray.length

            return(
                    <div className={appCss.App}>                     
                        <ClientsDisplay 
                        clientsArray={this.state.clientsArray} 
                        changed={this.valueChangerClient} 
                        clientDel={this.deleteClient}
                        clArrayLength={clientArraylength}/>
                    </div>                      
            )  
    }

共1个答案

匿名用户

目前,您实际上在每个渲染上调用props.clientDel

clickDel={props.clientDel(index)}

应该是

clickDel={()=