我正在构建任务板应用程序,但在将TasksList组件呈现在3个列表的板中时遇到问题:1个板-> 3个列表-> N个任务
似乎TasksList组件被渲染了两次,这很好,但是在第二次,它似乎为每个任务返回了不同的值(根据我的条件返回值是错误的,而在第一次渲染时就正确了-为什么?会有区别吗?)
我也收到此警告。可能与以下内容有关:
警告:在现有状态转换期间(例如,在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>
)
}
导出默认TasksList
答案 0 :(得分:0)
我怀疑问题出在TaskList组件中。因为在每个渲染器上都会调用input的onChange和按钮的onClick,但是只有在用户与其集成时才应调用那些事件处理函数。因此,为了将其更改为箭头方式,以便仅在我们进行交互时才调用该函数。
在TaskList.js中进行以下更改
更改
<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>
收件人
__init__() missing 1 required positional argument: 'gateway_parameters'
答案 1 :(得分:0)
好
在渲染中调用props.taskEditApprove。
尝试 props.taskEditApprove(props.listrole,task.id)}>确定
然后仅在交互时调用该函数。