Блог

Я не знаю, в чем здесь ошибка, так как я новичок, пожалуйста, помогите мне. Когда я добавил handleIncrement, появилась эта ошибка.

 import React, { Component } from 'react';
import Counter from './counter';

class Counters extends Component {


  state = {
      counters: [
          { id: 1, value: 4, name:'Cow Milk' },
          { id: 2, value: 0, name:'Buffalo Milk' },
          { id: 3, value: 0, name:'Almond Milk' },
          { id: 4, value: 0, name:'Cashew Milk' }
      ]
  };


  handleIncrement = counter => {
      const counters = [...this.state.counters]; //cloning the state array with id, value and name.
      const index = counters.indexOf(counter);
      counters[index] = {...counter};
      counters[index].value  ;
      this.setState({counters});
  }

  handleDelete = (counterId) => {
      const counters = this.state.counters.filter(c => c.id !== counterId); //gets all the counters except the deleted one. now we have a new array.
      this.setState({ counters });//because the key and value are the same({ counters: counters }), we can simplify
  };

  handleReset = (counterId) => {
      const counters = this.state.counters.map(c => {
          c.value = 0;
          return c;
      });
      this.setState({ counters });    
  }; //map all the counters, reset its value to 0 and then return it.

  render() { 
      return (  
          <div className="container col-12">
              <button 
                  onClick={this.handleReset}
                  className="btn-primary btn-sm m-2">
                  Reset
              </button>
              { this.state.counters.map(counter => (
                  <Counter 
                      key={counter.id} 
                      onIncrement={this.handleIncrement}
                      onDelete={this.handleDelete} 
                      counter={counter}
                      name={counter.name}
                  >
                      <h5>{counter.name}</h5>
                  </Counter>        
              ))}
              <div className="row justify-content-center">
                  <div className="col-3 mt-3">
                      <button className="btn btn-dark btn-block" >Order</button>
                  </div>
                  <div className="col-3 mt-3">
                      <button className="btn btn-dark btn-block" >Cancel</button>
                  </div>
              </div>
            
          </div>
      );
  }
}

export default Counters;`enter code here`
 

Объекты недопустимы в качестве дочернего элемента React (объект с ключами {идентификатор, значение, имя}). Если вы хотели отобразить коллекцию дочерних элементов, вместо этого используйте массив

На практике я видел эту ошибку, когда пытался использовать объект в качестве ребенка, например, этот фрагмент кода вызовет эту ошибку:

 function User() {
    const user = {
        name: 'name',
        age: 10
    }

    return <>{user}</>
}
 

Я не вижу реального решения. Но лучший способ написать handleIncrement функцию заключается в следующем:

 handleIncrement = (id) => {
    const counter = this.state.counter.map((c) => {
       if (c.id === id) {
           return {
               ...c,
               value: c.value   1
           }
       }

       return {...c}
    })
    
    this.setState({ counter })
}
 

Когда вы вызовете функцию в Counter компоненте, вам нужно будет перейти counter.id к ней. Это решение лучше, потому что вы работаете с неизменяемой структурой данных и его легче отлаживать.