React 组件第二次渲染问题答案

【问题标题】：React component second time render issueReact 组件第二次渲染问题
【发布时间】：2023-04-04 22:43:01
【问题描述】：

我正在构建一个任务板应用程序，但在一个包含 3 个列表的板中呈现 TasksList 组件时遇到问题：1 个板 -> 3 个列表 -> N 个任务

似乎 TasksList 组件被渲染了两次，这很好，但是第二次它似乎为每个任务返回了不同的值（根据我的条件返回是错误的，并且在第一次渲染时是正确的 - 为什么会有区别吗？）

我也收到此警告。也许与 ts 相关：警告：在现有状态转换期间无法更新（例如在render 内）。渲染方法应该是 props 和 state 的纯函数。

Board.js 组件渲染函数：

const tasksListsArr = Object.entries(this.state.tasks).map(list => {
            return (
                <TasksList
                    key={list[0]}
                    listrole={list[0]}
                    listTitle={this.state.Lists[list[0]]}
                    tasks={list[1]}
                    listTextChangedHandler={event => this.listTextChangedHandler(list[0], event)}
                    addTaskHandler={() => this.addTaskHandler(list[0])}
                    taskDeleteHandler={this.taskDeleteHandler}
                    moveTaskHandler={this.moveTaskHandler}
                    taskEditHandler={this.taskEditHandler}
                    taskEditApprove={this.taskEditApprove}
                />
            )
        })

TaskList.js 组件：

import React from "react"
import classes from "./TasksList.module.css"

const TasksList = props => {
    const tasks = props.tasks.map(task => {
        const buttonLeft =
            !task.isEdit && (props.listrole === "inprogress" || props.listrole === "done") ? (
                <button onClick={() => props.moveTaskHandler(task.id, "left")}>left</button>
            ) : null

        const buttonRight =
            !task.isEdit && (props.listrole === "inprogress" || props.listrole === "backlog") ? (
                <button onClick={() => props.moveTaskHandler(task.id, "right")}>right</button>
            ) : null

        const taskUtils = task.isEdit ? null : (
            <div>
                <span onClick={() => props.taskDeleteHandler(props.listrole, task.id)}>X</span>
                <span onClick={() => props.taskEditHandler(props.listrole, task.id)}>edit</span>
            </div>
        )

        const taskContent = task.isEdit ? (
            <div>
                <input
                    type='text'
                    onChange={event => props.listTextChangedHandler(props.listrole, event)}
                />
                <button onClick={props.taskEditApprove(props.listrole, task.id)}>OK</button>
            </div>
        ) : (
            <div>
                <div>{task.text}</div>
            </div>
        )

        return (
            <div key={task.id} className={classes.Task}>
                {buttonLeft}
                {taskContent}
                {buttonRight}
                {taskUtils}
            </div>
        )
    })
    console.log(tasks)

    return (
        <div className={classes.List}>
            <h2 className={classes.ListTitle}> {props.listTitle} </h2>
            <input type='text' onChange={props.listTextChangedHandler} placeholder='Add task...' />
            <button onClick={props.addTaskHandler}>+</button>
            <div className={classes.TasksList}>{tasks}</div>
        </div>
    )
}

导出默认任务列表

【问题讨论】：

标签： reactjs components

【解决方案1】：

我怀疑问题出在 TaskList 组件中。因为在每次渲染时都会调用输入的 onChange 和按钮的 onClick，但是这些事件处理函数只有在用户集成时才应该调用。因此要修复将它们更改为箭头方式，以便仅在我们交互时调用该函数。

TaskList.js 中所需的更改

改变

     <button onClick={props.taskEditApprove(props.listrole, task.id)}>OK</button>

到

    <button onClick={() => props.taskEditApprove(props.listrole, task.id)}>OK</button>

和

改变

    <input type='text' onChange={props.listTextChangedHandler} placeholder='Add task...' />
        <button onClick={props.addTaskHandler}>+. </button>

到

    <input type='text' onChange={event => props.listTextChangedHandler(event)} placeholder='Add task...' />
        <button onClick={() => props.addTaskHandler()}>+</button>

【讨论】：

【解决方案2】：

好的

props.taskEditApprove 在渲染中被调用。

试试 props.taskEditApprove(props.listrole, task.id)}>确定

那么函数只会在交互时被调用。

【讨论】：