Реакция на учебу: почему нам не нужно использовать this.state.count в строке 18 для доступа к счетчику, но мы должны использовать this.state.imageUrl в строке 12?

Question

Я не уверен, почему вывод исчезает, если я вместо этого делаю this.state.count в строке 18. Буду признателен за помощь

  export default class Counter extends Component {
  state = {
    count: 0,
    imageUrl: "https://picsum.photos/200"
  };

  render() {
    return (
      <div>
    <img src={this.state.imageUrl} alt="" />
    <span>{this.formatCount()}</span>
        <button>Increment</button>
      </div>
    );
  }

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

Answer 1

Когда вы делаете:

const { count } = this.state;

Вы извлекаете count из this.state, это называется деструктуризацией

Вы также можете сделать это следующим образом:

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

Answer 2

это const { count } = this.state; называется деструктуризацией, и оно было добавлено к javascript в версии es2015

, вы можете установить новое имя переменной для proprty, как это

const { count:value } = this.state;

и вы устанавливаете начальное значение в случае, если значение объекта не определено

const { count=0 } = this.state;

? вы можете создать get proprty как сокращение для this.state.count, например,

export default class Counter extends Component {
  state = {
    count: 0,
    imageUrl: "https://picsum.photos/200"
  };

  render() {
    return (
      <div> 
    {this.count} ?
    <img src={this.state.imageUrl} alt="" />
    <span>{this.formatCount()}</span>
        <button>Increment</button>
      </div>
    );
  }

  formatCount() {
    return count === 0 ? "Zero" : count;
  }

 get count(){
  return this.state.count;
 }

read 101 Задание по деструктуризации MDN объяснить все функции деструктуризации.