Невозможно увидеть значение кнопки увеличения

Question

Новый для react, и я удаляю локальное состояние в моем counter компоненте и буду полагаться на props для получения необходимых данных. Я считаю, что это называется controlled component. После того, как я избавился от state и изменил все, где использовал this.state на this.props, я больше не могу видеть поле, в котором отображается значение, когда я нажимаю кнопку increment. Я опубликую весь код ниже.

/ * Счетчик компонентов * /

import React, { Component } from "react";

class Counter extends Component {
renderTags() {
return (
  <ul>
    {this.state.tags.length === 0 && <p> There are no tags </p>}
    {this.state.tags.map(tag => (
      <li key={tag}> {tag} </li>
    ))}
  </ul>
    );
  }

  // You can do styles this way or do it inline
  //   styles = {
  //     fontSize: 50,
  //     fontWeight: "bold"
  //   };


 render() {
 return (
  <div>
    <span style={{ fontSize: 20 }} className={this.getBadgeClasses()}>
      {this.formatCount()}
    </span>
    <button
      onClick={() => this.props.onIncrement(this.props.counter)}
      className="btn btn-secondary btn-sm"
    >
      Increment
    </button>

    <button
      onClick={() => this.props.onDelete(this.props.counter.id)}
      className="btn btn-danger btn-sm m-2"
    >
      Delete
    </button>

    {/* {this.renderTags()}
    <p>{this.state.tags.length === 0 && "Please create a new tag"}</p> */}
  </div>
);
 }

  getBadgeClasses() {
    let classes = "badge m-2 badge-";
    classes += this.props.counter.value === 0 ? "warning" : "primary";
    return classes;
  }

 formatCount() {
const { count } = this.props.counter;
return count === 0 ? "Zero" : count;
  }
}

export default Counter;

/ * Компоненты счетчиков * /

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

class Counters extends Component {
 state = {
counters: [
  { id: 1, value: 5 },
  { id: 2, value: 0 },
  { id: 3, value: 0 },
  { id: 4, value: 0 }
]
 };

 handleIncrement = counter => {
console.log(counter);
};

  handleReset = () => {
   const counters = this.state.counters.map(c => {
  c.value = 0;
  return c;
});
this.setState({ counters });
  };

 handleDelete = counterID => {
const counters = this.state.counters.filter(c => c.id !== 
   counterID);
   this.setState({ counters });
 };

 render() {
   return (
  <React.Fragment>
    <button onClick={this.handleReset} className="btn btn-dark btn-sm m-2">
      Reset
    </button>
    {this.state.counters.map(counter => (
      <Counter
        key={counter.id}
        onDelete={this.handleDelete}
        counter={counter}
        onIncrement={this.handleIncrement}
      />
    ))}
  </React.Fragment>
   );
    }
  } 

  export default Counters;

Answer 1

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

formatCount() {
    const { count } = this.props.counter;
    return count === 0 ? "Zero" : count;
}

В вашем счетчике нет ключа с именем count. Это ценность. Итак, вы должны использовать его или вам нужно уничтожить его так:

const { value: count } = this.props.counter

Но использование одного и того же имени более логично. Кроме того, ваш Counter компонент будет компонентом без сохранения состояния, так как вам не потребуется никакого метода состояния или жизненного цикла.

Одно дополнительное изменение будет сделано для методов-обработчиков, таких как onClick для onIncrement. Если вы используете функцию стрелки, эта функция будет воссоздана при каждом рендеринге. Вы можете использовать дополнительный метод обработчика. Вот полный рабочий пример (упрощенный для ясного просмотра).

class Counters extends React.Component {
  state = {
    counters: [
      { id: 1, value: 5 },
      { id: 2, value: 0 },
      { id: 3, value: 0 },
      { id: 4, value: 0 }
    ]
  };

  handleIncrement = counter => {
    const { counters } = this.state;
    const newCounters = counters.map( el => {
      if( el.id !== counter.id ) { return el; }
      return { ...counter, value: counter.value + 1 }
    } )
    this.setState({ counters: newCounters});
  };

  handleReset = () => {
    const counters = this.state.counters.map(c => {
      c.value = 0;
      return c;
    });
    this.setState({ counters });
  };

  handleDelete = counter => {
    const { id: counterID } = counter;
    const counters = this.state.counters.filter(c => c.id !== counterID);
    this.setState({ counters });
  };

  render() {
    return (
      <div>
        <button onClick={this.handleReset} className="btn btn-dark btn-sm m-2">
          Reset
        </button>
        {this.state.counters.map(counter => (
          <Counter
            key={counter.id}
            onDelete={this.handleDelete}
            counter={counter}
            onIncrement={this.handleIncrement}
          />
        ))}
      </div>
    );
  }
}

const Counter = props => {
  const { counter, onIncrement, onDelete} = props;

  function formatCount(){
    const { value } = counter;
    return value === 0 ? "Zero" : value;
  }

  function handleIncrement(){
    onIncrement( counter );
  }

  function handleDelete(){
    onDelete( counter );
  }

  return (
    <div>
      <span>
        {formatCount()}
      </span>
      <button
        onClick={handleIncrement}
      >
        Increment
        </button>

      <button
        onClick={handleDelete}
      >
        Delete
        </button>
    </div>
  );
}

ReactDOM.render(<Counters />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>