Question

我基本上是想显示一个带有数字（初始值1）的按钮，当您单击该按钮时，数字会增加一个。我有两个组件，一个主要的App组件和一个按钮的Button组件。 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我在App组件中做错了什么，可能会损坏按钮？

我什至尝试删除Button的render函数中的onClick属性，这给了我这个错误：

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（呈现App的文件）：

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

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

serviceWorker.unregister();

我希望它是一个包含数字的按钮，每次单击该按钮时数字都会增加1，但是相反，它给了我上面显示的错误。

Answer 1

您没有在Button中定义任何状态，因此它为null。请记住：状态是组件的 local 。您需要道具（或上下文）才能将信息从一个组件传播到另一个组件。

您也必须将App的状态传递给Button作为道具。然后，从prop渲染计数器：

<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>
    );
  }
}

如何显示从另一个组件传递的状态

1 个答案: