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

Question

我正在学习 react，遇到了这个错误，找不到解决办法。

我收到的错误是：

在现有状态转换期间无法更新（例如在 render)。渲染方法应该是 props 的纯函数和 状态。在客户展示 (http://localhost:3000/static/js/main.chunk.js:672:39) 在 App 的 div (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>                      
            )  
    }

Answer 1

目前，您实际上是在每次渲染时调用 props.clientDel：

clickDel={props.clientDel(index)}

应该是

clickDel={() => props.clientDel(index)}