Синтаксис setState() кажется неправильным

Почему это работает, когда я делаю «состояние:», а не «задачи:» в функции addItem(). Я думал, что синтаксис таков, что вы ставите состояние, которое хотите изменить, что в этом и будет задачами:

import React from 'react';
import './App.css';

class App extends React.Component {
  constructor(){
    super();
    this.state = {
      value: '',
      tasks: []
    };

    this.handleChangeEvent = this.handleChangeEvent.bind(this)
    this.addItem = this.addItem.bind(this)
  }

  handleChangeEvent(event) {
      this.setState({
        value: event.target.value
      })
  }

  addItem(){
      this.setState({
      state: this.state.tasks.push(this.state.value),
      value: ''
      })

  }

  render(){

    const itemList = this.state.tasks.map((num,index) => <li key = {index}>{num}</li>)
    return(
      <div>
              <input type = "text" value = {this.state.value} onChange = {this.handleChangeEvent}></input>
              <button onClick = {this.addItem}>+</button>
              <button>-</button>
              <ul>{itemList}</ul>  
      </div>
    )
  }
}


export default App;

Работает не. Вы видите обновление случайно, потому что изменяете старое состояние, чего никогда не следует делать.

jonrsharpe 20.03.2022 14:28
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
1
50
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Прежде всего, вы изменяете свое состояние, это первое правило при работе с управлением состоянием реакции. Никогда не изменяйте состояние. и вам нужно обернуть обработчики событий в анонимную функцию, чтобы вы могли передать свой объект события. Это ваш код, исправленный ниже ---

import React from 'react';
import './App.css';

class App extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            value: '',
            tasks: []
         };

        this.handleChangeEvent = this.handleChangeEvent.bind(this)
        this.addItem = this.addItem.bind(this)
    }

    handleChangeEvent(event) {
        this.setState({
            value: event.target.value
        })
    }

    addItem(){
        const tempTasksArray = this.state.tasks.concat(this.state.value)
        this.setState({
           tasks: tempTasksArray,
         })
    }

   render(){
       const itemList = this.state.tasks.map((num,index) => <li key = {index}>{num}</li>)
       return(
            <div>
                 <input 
                       type = "text" 
                       value = { this.state.value } 
                       onChange = {(event) => this.handleChangeEvent(event) } />
    
                 <button onClick = {() => this.addItem }>
                     +
                </button>
                <button>
                    -
                </button>
             <ul>{ itemList }</ul>
          </div>
       )}
  }


   export default App;

Другие вопросы по теме