javascript - 即使我不使用道具,React 道具也在更新
问题描述
我使用 create-react-app 模板制作了一个项目。我正在尝试从 JSON 文件导入数据并将其作为道具发送到 todos 组件文件,但我没有将它用作 Todos 文件中的道具,但是当我使用添加按钮应用程序组件更新文件时,它会更新任务列表。我不明白它为什么这样做。如果有人可以解释发生了什么,这将是一个很大的帮助。
这是 app.js 文件
import { Component } from 'react';
import Todos from "./todos";
import tasks from './data.json';
import './App.css';
class App extends Component {
constructor(props) {
super(props);
this.state = { task: '' };
this.addTask = this.addTask.bind(this);
this.handleChange = this.handleChange.bind(this);
}
addTask() {
tasks.push({
title: this.state.task,
done: false
});
this.setState({ task: "" });
}
handleChange(event) {
this.setState({ task: event.target.value });
}
render() {
return (
<div className="App">
<header className="App-header">
<input className="App-task-input" type="text" placeholder="Title"
value={this.state.task} onChange={this.handleChange} />
<button className="App-add-btn" onClick={this.addTask}>Add Task</button>
</header>
<Todos tasks={tasks} />
</div>
);
}
}
export default App;
这是 todos.js 文件
import { Component } from "react";
import tasks from "./data.json";
class Todos extends Component {
changeCheckbox(index) {
console.log(index, tasks);
}
render() {
return (
<main className="todo">
// It should update if i use this.props.tasks instead of tasks
{tasks.map((t, i) =>
<div className="todo-item" key={i}>
<input
id={t.id}
className="todo-checkbox"
type="checkbox"
checked={t.done}
onChange={this.changeCheckbox.bind(this, i)} />
<label className="todo-label" htmlFor={t.id}>{t.title}</label>
</div>
)}
</main>
);
}
}
export default Todos;
解决方案
每当状态更改组件重新呈现时,您就有父组件和子组件。
在您的父组件中,您正在更新您的列表,这就是为什么无论您是否传递更改,孩子也会重新渲染。我会发生的。
为了防止这种情况,您需要使用shouldComponentUpdate
,React.memo
或PureComponent
。
供您参考以了解场景并举例说明。
每当您调用 method
setState()
时,组件都会自动重新渲染
推荐阅读
- node.js - Azure 函数 context.log 在函数回调中不起作用
- java - 如何从 List 中获取元素
元素=新的 ArrayList<>();? - html - 如何将图像直接堆叠在 div 之上?
- json - 在 Angular 中难以实现分页功能
- css - Angular cdk拖放:拖放到其他容器后保持元素样式
- python - 如何在 Pytest 的收集时添加自定义 XML 属性?
- mysql - Delete rows to keep only top values in a sql table
- react-native - onEndReached 在数据加载完成之前触发
- ios - 在不覆盖自定义更改的情况下更新 GitHub iOS SDK
- unity3d - 如何让鼠标点击对象,而不是当它在被点击的按钮后面时?