我认为渲染工作两次

Question

我只是在学习 React，试图编写一个简单的 TODO 列表应用程序。当我尝试添加新任务时，会添加两个相同的任务。我尝试通过 console.log 元素进行调试，但发现了一个问题。 render 工作了两次，所以我的按钮向函数发送了两次信息。有人可以指导我找到解决方案吗？这是代码。

    import React from 'react';

    class TaskInput extends React.Component {
      constructor(props) {
        super(props);

        this.state = {
          input: ''
        };
      }

      addTask = () => {
        const { input } = this.state;
        if (input) {
          this.props.addTask(input);
          this.setState({ input: '' });
        }
      };

      handleEnter = event => {
        if (event.key === 'Enter') this.addTask();
      };

      inputChange = event => {
        this.setState({ input: event.target.value });

      };

      render() {
        const { input } = this.state;
        console.log(this.state); 
        return (
          <div className="task-input">
            <input
              type="text"
              onKeyPress={this.handleEnter}
              onChange={this.inputChange}
              value={input}
            ></input>
            <button onClick={this.addTask } >ADD</button>

          </div>
        );
      }
    }

    export default TaskInput;

这里是 App.js 代码：

    import React from 'react';
    import Task from './components/Task';
    import TaskInput from './components/TaskInput';

    class App extends React.Component {
      constructor () {
        super();

        this.state = {
          tasks: [
            {id: 0, title: 'Create Todo-app', done: false},
            {id: 1, title: 'Do smth else', done: true},
            {id: 2, title: 'Do more things', done: false}
          ]
        };
      }

    addTask = task => {
      this.setState(state => {
        let {tasks} = state;
        console.log("state");
        tasks.push({
          id: tasks.length !==0 ? tasks.length : 0,
          title: task,
          done: false
        });
        return tasks;
      });
    }

    doneTask = id => {
      const index = this.state.tasks.map(task => task.id).indexOf(id);
      this.setState(state => {
        let {tasks} = state;
        tasks[index].done = true;
        return tasks;
      });
    };
    deleteTask = id => {
      const index = this.state.tasks.map(task => task.id).indexOf(id);
      this.setState(state => {
        let {tasks} = state;
        delete tasks[index];
        return tasks;
      })
    };
    render() {

      const { tasks } = this.state;
      const activeTasks = tasks.filter(task => !task.done);
      const doneTasks = tasks.filter(task => task.done)

       return (
       <div className = "App">
         <h1 className="top">Active tasks: {activeTasks.length}</h1>
         {[...activeTasks, ...doneTasks].map(task => (
          <Task
            doneTask={() => this.doneTask(task.id)}
            deleteTask={() => this.deleteTask(task.id)}
            task={task}
            key={task.id}
             ></Task>))}
             <TaskInput addTask={this.addTask}></TaskInput>
       </div>
       );
      }
    }
    export default App;

Answer 1

我认为你不小心直接修改了里面的状态addTask。

let {tasks} = state;行正在创建对原始状态的引用，而不是新副本，然后您的推送直接修改了状态。

像这样使用 expansion/spread syntax 获取数组的副本应该可行：

addTask = task => {
  this.setState(state => {
    const tasks = [ ...state.tasks ];
    tasks.push({
      id: tasks.length !==0 ? tasks.length : 0,
      title: task,
      done: false
    });
    return { tasks };
  });
}

使用let tasks = [ ...state.tasks ];将创建一个新数组而不是引用，并防止直接修改状态。

您看到双重结果的原因是您通过推送有效地设置了状态，然后使用返回值再次设置它。

Answer 2

我已经稍微更改了您的代码。它在这里工作。请检查一下好吗？

class TaskInput extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      input: "",
      tasks: []
    };
  }

  addTask = newTask => {
    this.setState(state => ({
      ...state,
      input: "",
      tasks: [...state.tasks, newTask]
    }));
  };

  handleEnter = event => {
    if (event.key === "Enter") this.addTask(event.target.value);
  };

  inputChange = event => {
    this.setState({ input: event.target.value });
  };

  render() {
    const { input } = this.state;
    console.log(this.state);
    return (
      <div className="task-input">
        <input
          onKeyPress={this.handleEnter}
          onChange={this.inputChange}
          value={input}
        ></input>
        <button onClick={this.addTask}>ADD</button>
      </div>
    );
  }
}

ReactDOM.render(<TaskInput/>, document.querySelector("#root"));

.as-console-wrapper {
  max-height: 5px;
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>



<div id="root"></div>

我认为渲染工作两次

I think render works twice

render

reactjs