Как отобразить состояние, переданное из другого компонента

Question

Я в основном пытаюсь показать кнопку с номером (начальное значение 1), и когда вы нажимаете на эту кнопку, число увеличивается на единицу. У меня есть два компонента, основной компонент приложения и компонент кнопки для кнопки. Компонент App передает компоненту Button функцию, которая обновляет номер. Но когда я загружаю все это, это дает мне эту ошибку:

TypeError: this.state is null
render
src/Button.js:6

  export class Button extends React.Component {
  render() {
  return (
> <button onClick={this.props.onClick}>
  {this.state.count}
  </button>
  );

Итак, мои вопросы: 1 Почему это дает мне эту ошибку? 2 Что я сделал неправильно в компоненте приложения, который может сломать кнопку?

Я даже пытался удалить атрибут onClick в функции рендеринга Button, и он выдает мне эту ошибку:

TypeError: this.state is null
render
src/Button.js:6

  export class Button extends React.Component {
  render() {
  return (
> <button>
  {this.state.count}
  </button>
  );

App.js:

import {Button} from './Button';

export class App extends React.Component {

  constructor(props) {
    super(props);
    this.state = {count: 1};
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    let currentCount = this.state.count;
    this.setState({count: (currentCount + 1)});
    console.log('handleClick()');
  }

  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo"/>
          <Button onClick={this.handleClick} />

        </header>
      </div>
    );
  }
}

Button.js:

export class Button extends React.Component {
  render() {
    return (
      <button onClick={this.props.onClick}>
        {this.state.count}
      </button>
    );
  }
}

index.js (файл, который отображает приложение):

import {App} from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<App />, document.getElementById('root'));

serviceWorker.unregister();

Я ожидал, что это будет кнопка, содержащая число, которое будет увеличиваться на 1 каждый раз, когда вы нажимаете кнопку, но вместо этого она выдала мне ошибки, которые я показывал выше.

Answer 1

Вы не определили никакого состояния в Button, поэтому оно равно нулю.Помните: состояния локальные для компонентов.Вам нужен реквизит (или контекст) для распространения информации от одного компонента к другому.

Вы должны передать состояние App до Button в качестве реквизита.Затем вы выводите свой счетчик из реквизита:

<Button count={this.state.count} onClick={this.handleClick} />

// then :

export class Button extends React.Component {
  render() {
    return (
      <button onClick={this.props.onClick}>
        {this.props.count}
      </button>
    );
  }
}