React新手开发随机数生成按钮点击后组件未更新问题求助

问题原因 #

核心错误是你对React类组件的setState API用法有误：

• setState是React内置的实例方法，不是可直接赋值的属性
• 你写的this.setState = {xxx}直接覆盖了React原生的setState方法，不会触发状态更新、组件重渲染流程，因此DOM没有任何变化

修正方法 #

把generateRandomNumber方法里的赋值逻辑改为调用setState方法，传入新的状态对象即可：

// 错误写法
// this.setState = {
//   number: Math.random()
// }

// 正确写法
this.setState({
  number: Math.random()
})

修正后完整代码 #

import logo from './logo.svg';
import './App.css';
import React from 'react';
import PropTypes from 'prop-types';

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      number: 0
    }

    this.generateRandomNumber = this.generateRandomNumber.bind(this);
  }

  generateRandomNumber() {
    // 修正为调用setState方法
    this.setState({
      number: Math.random()
    })
  }
  render() { 
    return (  
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
      </header>
      <button onClick={this.generateRandomNumber}>random</button>
      <Number myNumber={this.state.number}/>
    </div>
  );
  }

}

class Number extends React.Component {
  render() { 
    return <div className="Number">{this.props.myNumber}</div>;
  }
}
  
export default App;

内容的提问来源于stack exchange，提问作者Octavian Niculescu