React setState 不重新渲染

Question

在下面的代码中，测试状态正在更新但未重新渲染。 我已经更新了父级按钮单击更改的状态，我希望它重新渲染包括按钮在内的整个组件。 但它不是重新渲染按钮。 需要帮助写这个。 这是一个测试代码，两个类都是必需的。

import React from 'react';

class Button extends React.Component {
  constructor(props){
      super(props)
      this.state = {
          id : props.id
      }
  }
  render() {
      console.log('Button state id is', this.state.id)
      return(
          <div>
              'hi ' +  {this.state.id}
              <br/>
              <button type='submit' onClick={this.props.handleSubmit}>
                  submit
              </button>
          </div>
      )
  }
}

export default class App extends React.Component {
  constructor(props) {
      super(props)
      this.state = {
          id: 1
      }
      this.changeId = this.changeId.bind(this)
  }
  changeId() {
      let id = this.state.id
      console.log('parent state id is', id)
      this.setState({
          id: ++id
      })
  }
  render() {
      return(
          <Button id={this.state.id} handleSubmit={this.changeId}/>
      )
  }
}

编辑：我修改了代码以消除明显的错误，例如未将changeId函数传递给Button

编辑 2：在这里找到解决方案： React Child Component Not Updating After Parent State Change componentWillReceiveProps

Answer 1

要在子组件中重新呈现数字，您需要对代码进行以下更改：

在当前场景中changeId函数中id的值为event，所以不能做++id。 您必须将其更新为：

changeId() {
    this.setState({
        id: ++this.state.id
    })
}

为了让子组件重新渲染 props 值，你必须监听 props 是否有任何变化。 为此，请使用 react 的 componentDidUpdate 生命周期。 像这样：

componentDidUpdate(prevProps){
   if (this.props.id !== prevProps.id) {
    this.setState({id: this.props.id});
  }
}

---

另一种方法是不要将 props.id 存储在子状态中。 直接在渲染中使用它。

 class Button extends React.Component { render() { return( <div> 'hi ' + {this.props.id} <br/> <button type='submit' onClick={this.props.handleSubmit}> submit </button> </div> ) } } class App extends React.Component { constructor(props) { super(props) this.state = { id: 1 } this.changeId = this.changeId.bind(this) } changeId() { this.setState({ id: ++this.state.id }) } render() { return( <Button id={this.state.id} handleSubmit={this.changeId}/> ) } } ReactDOM.render(<App />, document.getElementById('root'))

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> <div id="root" />

Answer 2

您实际上还没有将handleSubmit作为道具传递给Button组件。 假设您希望在单击按钮时调用changeId() ，请尝试以下操作：

class Test extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            id: 1
        }
        this.changeId = this.changeId.bind(this)
    }
    changeId() {
        console.log('change id called', id)
        this.setState({
            id: ++id
        })
    }
    render() {
        return(
            <Button id={id} handleSubmit={this.changeId}/>
        )
    }
}

Answer 3

我们可以通过执行以下操作来进一步优化组件 -：Highlights -：

• changeId() {更改为changeId = () => { （ changeId = () => {箭头符号），如果我们使用这个我们不需要this.changeId = this.changeId.bind(this) ;
• 真的不需要另外一个专门用于按钮的组件，可以将它组合在同一个组件中。

import React, {Component} from 'react'; 
export default class Test extends React.Component {
        constructor(props) {
            super(props)
            this.state = {
                id: 1
            }
        }
        changeId = () => {
            this.setState({
                id: ++this.state.id
            })
        }
        render() {
            return(
               <div>
                    'hi ' +  {this.state.id}
                    <br/>
                    <button type='submit' onClick={this.changeId}>
                        submit
                    </button>
                </div>
            )
        } }

Answer 4

componentWillReceiveProps的示例适用于我的情况，当我想在父组件的setState上更新 React 的子组件时：

      componentWillReceiveProps(props) {
        this.setState({
          currentID: props.currentID
        });
      }