道具更改时重新渲染React组件? [英] Rerender React component when props change?

问题描述

我有一个带有Mobx存储的react组件，如下所示:

I have a react component with a Mobx store that looks like this:

class Board extends Component {
  componentDidMount() {
    this.props.dataStore.getSinglePlayer(1)
    this.props.squareStore.getAllSquares()
  }

  componentWillReceiveProps(nextProps) {
    if (
      this.props.dataStore.currentPlayer !==
      this.nextProps.dataStore.currentPlayer
    ) {
      this.nextProps.dataStore.getSinglePlayer(1)
    }
  }

  randomNumber() {
    return Math.floor(Math.random() * 6) + 1
  }

  roll(playerId, playerPosition) {
    let dice1 = this.randomNumber()
    let dice2 = this.randomNumber()

    let totalRoll = dice1 + dice2
    let totalPosition = totalRoll + playerPosition
    this.props.dataStore.changeUserPosition(playerId, totalRoll)
    document.getElementById('dice').innerHTML =
      'You rolled ' + totalRoll + '!  You are now on ' + totalPosition
  }

  render() {
    var player = {
      name: '',
      id: '',
      position: 0
    }
    console.log(this.props.dataStore.currentPlayer)
    if (this.props.dataStore.currentPlayer) {
      var currentPlayer = this.props.dataStore.currentPlayer
      player = {
        name: currentPlayer.name,
        id: currentPlayer.id,
        position: currentPlayer.position
      }
    }
    if (this.props.squareStore.squares) {
      var squares = this.props.squareStore.squares.map((square, i) => {
        var movement

        if (i == player.position) {
          movement = **
        }
        return (
          <li key={i}>
            <span>
              {square.title}
              <br />
              {movement}
              {square.price}
            </span>
          </li>
        )
      })
    } else {
      squares = <h4>Squares being loaded...</h4>
    }

    return (
      <div>
        <h1>Player: {player.name}</h1>
        <h2>Roll Dice!</h2>
        <button onClick={() => this.roll(player.id, player.position)}>
          Roll
        </button>{' '}
        <h1 id="dice">{}</h1>
        <div className="board">
          <ul>{squares}</ul>
        </div>
      </div>
    )
  }
}

export default inject('dataStore', 'squareStore')(observer(Board))

单击按钮后，此.props.dataStore.currentPlayer.position将更新为新值.但是，只有在手动刷新页面时才会显示此新值.有没有办法告诉组件值已更改，并且应该自动重新呈现?

When the button is clicked this.props.dataStore.currentPlayer.position updates with a new value. However this new value only shows up when the page is manually refreshed. Is there a way of telling the component that the value has changed and it should rerender automatically?

推荐答案

React.Component生命周期=>更新

更新可能是由于道具或状态的更改引起的.

这意味着如果您想重新渲染组件，则需要:

That's mean if you would like to re-render your component, you need to:

• 使用this.setState({ })方法更新组件状态
• 或将更新的props从父级传递到该组件
• 或者如果您使用Redux/MobX作为状态管理器，则需要更新存储，因此将更新已连接的props并触发re-render

• update Component state by using this.setState({ }) method
• or pass updated props to that component from parent
• or if you are using Redux/MobX as the state manager, you need to update the store, so connected props will be updated and re-render would be triggered

这篇关于道具更改时重新渲染React组件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！