我的组件不会重新渲染

Question

当我点击按钮时，我在控制台中看到“1”，但从未看到“2”。为什么会这样？你能帮帮我解决这个问题吗？我真的不知道为什么我的第二个组件没有更新。

class App extends PureComponent {
  constructor() {
    super();
    this.state = {
      name: 'Vasya'
    }
    this._onChange = this._onChange.bind(this);
  }

  _onChange(name) {
    this.setState({
      name: name
    });
  }
  
  render() {

    console.log(1);

    return {
      <div>
        <Button onClick={this._onChange('Petr')} />
        <AnotherComponent username={this.state.name} />
      </div>
    }
  }
}

class AnotherComponent extends PureComponent {
  const {
      username
    } = this.props
  
  render() {

    console.log(2);

    return {
      <div>
        test
      </div>
    }
  }
}

export default App;

Answer 1

您示例中的一些代码问题！

• 当你从render（）返回你的React元素时，它们必须用parens（）包裹而不是curlies {}
• 使用React.Component，而不是React.PureComponent，否则你会遇到问题
• ＆LT;按钮和GT;不是一件事，请使用＆lt; button＆gt;

主要问题是无限循环 - 当你渲染时，这一行：

<Button onClick={this._onChange('Petr')} />

...这在渲染时调用_onChange（）函数，并将结果作为onClick prop传递给Button。这不是你想要的 - 你希望onClick prop是一个调用_onChange（）的函数。所以

<button onClick={ () => this._onChange('Petr')} />

完整的工作示例：

＆＃13;

＆＃13;

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      name: 'Vasya'
    }
    this._onChange = this._onChange.bind(this);
  }

  _onChange(name) {
    this.setState({
      name: name
    });
  }
  
  render() {

    console.log(1);

    return (
      <div>
        <button onClick={ () => this._onChange("Petr") } />
        <AnotherComponent username={this.state.name} />
      </div>
    );
  }
}

class AnotherComponent extends React.Component {
  
  render() {

    console.log(2);

    return (
      <div>
        test
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("app") );

＆＃13;

<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="app"></div>

＆＃13;

＆＃13;

＆＃13;