reactjs - 反应:更改父状态不呈现子状态
问题描述
我对反应非常陌生,并且正在构建一个简单的待办事项列表应用程序。我正在尝试从我的子组件中编辑数据并将其发送回我的父级。当我打印控制台日志时,父状态似乎设置正确,但子元素没有刷新。我在这里做一些概念上的错误吗?
我试图分享整个代码,因为我不确定它在概念上是否正确。我是 JS 新手。当调用 handleSave() 和 handleComplete() 时,我可以看到返回正确的值并将其设置为我的父状态,但没有刷新子组件。
下面是我的父类代码。
class App extends Component {
state = {
taskList: [
]
};
saveEventHandler = data => {
console.log("I am in saveEventHandler");
var uniqid = Date.now();
const taskList = [...this.state.taskList];
taskList.push({
id: uniqid,
taskDescText: data,
isFinished: false
});
console.log(taskList);
this.setState({'taskList':taskList});
};
deleteEventHandler = (index) => {
const taskList = [...this.state.taskList];
taskList.splice(index,1)
this.setState({'taskList':taskList});
}
editEventHandler = (index,data) => {
var uniqid = Date.now();
console.log("In edit event handler")
console.log(data)
console.log(index)
const taskList = [...this.state.taskList];
taskList[index] = {
id: uniqid,
taskDescText: data,
isFinished: false
}
this.setState({'taskList':taskList});
console.log(this.state.taskList)
}
handleComplete = (index) => {
console.log("In complete event handler")
const taskList = [...this.state.taskList];
const taskDescriptionOnEditIndex = taskList[index]
taskDescriptionOnEditIndex.isFinished = true
taskList[index] = taskDescriptionOnEditIndex
this.setState({'taskList':taskList});
console.log(this.state.taskList)
}
render() {
return (
<div className="App">
<h1>A Basic Task Listing App </h1>
<CreateTask taskDescription={this.saveEventHandler} />
{this.state.taskList.map((task, index) => {
return (
<Task
taskDescText={task.taskDescText}
taskCompleted={task.isFinished}
deleteTask={() => this.deleteEventHandler(index)}
editTask={(editTask) => this.editEventHandler(index,editTask)}
handleComplete={() => this.handleComplete(index)}
editing='false'
/>
);
})}
</div>
);
}
}
export default App;
和我的孩子班级代码
export default class Task extends React.Component {
state = {
editing : false
}
notCompleted = {color: 'red'}
completed = {color: 'green'}
textInput = React.createRef();
constructor(props) {
super(props);
this.state = props
}
handleEdit = () => {
this.setState({editing:true});
}
handleSave = () => {
this.props.editTask(this.textInput.current.value);
this.setState({editing:false});
};
editingDiv = (<div className = 'DisplayTask'>
<span className='TaskDisplayText' style={!this.props.taskCompleted ? this.notCompleted: this.completed}>{this.props.taskDescText} </span>
<button label='Complete' className='TaskButton' onClick={this.props.handleComplete}> Complete</button>
<button label='Edit' className='TaskButton' onClick={this.handleEdit}> Edit Task</button>
<button label='Delete' className='TaskButton' onClick={this.props.deleteTask}> Delete Task</button>
</div> );
nonEditingDiv = ( <div className = 'DisplayTask'>
<input className='TaskDescEditInput' ref={this.textInput}/>
<button label='Save' className='TaskButton' onClick={this.handleSave} > Save Task</button>
<button label='Delete' className='TaskButton' onClick={this.props.deleteTask}> Delete Task</button>
</div>);
render() {
return (
!this.state.editing ? this.editingDiv : this.nonEditingDiv
)
};
}
解决方案
将您的editingDiv
和nonEditingDiv
定义移动到render()
方法中。由于您将它们定义为实例变量,因此它们会被初始化一次,并且永远不会再次使用新的 prop 值重新渲染。
通过将它们移动到render()
方法,render()
每次有道具更新时都会调用该方法,从而获取新的道具值。
推荐阅读
- javascript - 如何使用 vue 分析组件在 VueJS 上设置自定义变量
- php - 如何使用来自 json 的数据库值填充 HTML 下拉列表
- c - 如何在 C 中删除文件中的项目但保留格式?
- python - Monkeyrunner 使用 python 2.x 而不是 3.x
- http - HTTP下的DDos攻击
- c++ - std::move 的用法
- node.js - 使用 Sequelize 查找即将到来的生日
- javascript - vuex动作中的方法返回未定义
- javascript - 尝试使用 async.each 为 promise.allsettled 编写替代方案
- python - 如何确定传递的关键字参数的顺序?