反应道具即使在我不使用道具的情况下也在更新 [英] React props are updating even when i'm not using the props

问题描述

我使用创建-反应-应用程序模板创建了一个项目。我正在尝试从JSON文件导入数据并将其作为道具发送到TODOS组件文件，但我没有将其用作TODOS文件中的道具，但当我使用应用程序组件中的添加按钮更新文件时，它会更新TODO列表。我不明白它为什么要这么做。如果有人能解释一下发生了什么事，那将是一个很大的帮助。

这是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。

为您理解场景和举例的参考。

只要调用方法setState()，组件就会自动重新呈现

How to prevent unnecassery re-rendering

这篇关于反应道具即使在我不使用道具的情况下也在更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！