-1

我正在将一个布尔道具传递给我的组件，稍后将用于渲染某些东西。我将它的值设置为一个状态，以便我可以更改它并重新渲染组件。

这是我的组件的样子：

class MyComponent extends React.Component {
  constructor (props) {
    super(props)

    console.warn('IS FAVOURITED IN THE CONSTRUCTOR', props.isFavourited)
    this.state = {
      isFavourited: props.isFavourited
    }
  }

  render () {
    const { isFavourited } = this.state
     console.warn('IS FAVOURITED IN THE RENDER', props.isFavourited)

    return (
      <div>
        {
          isFavourited ? <span> IS FAVOURITED</span> : <span>IS NOT FAVOURITED</span>
        }
      </div>
    )
  }
}

这句话很好，除非我刷新页面。基本上，当我刷新页面时，在构造函数中，props.isFavourited即使我传递的是true.

在刷新期间安装组件时是否存在断开连接？

有谁知道如何解决这个问题？

编辑：将添加更多关于组件外部发生的事情的上下文：

isFavouritedprop 来自一个数组，我在其中检查一个元素是否属于它。这就是我的组件调用的样子：

const isFavourite = favouriteList.indexOf(myElement) !== -1
if (isFavourite) {
  console.warn('IS FAVOURITE?', isFavourite)
}
return <MyComponent isFavourite={isFavourite}/>

现在这是另一个有趣的部分，当我刷新页面时，我得到以下日志：

是最喜欢的吗？真的

在构造函数中是最喜欢的 false

在渲染中是最喜欢的 false

几乎感觉它在刷新期间没有正确传递

4

1 回答 1

1

如果没有更多上下文，我认为使用道具初始化状​​态是一种反模式，您可以在这篇文章中阅读更多内容：

在 getInitialState 中使用 props 生成状态通常会导致重复“事实来源”，即真实数据在哪里。这是因为 getInitialState 仅在首次创建组件时调用。

https://medium.com/@justintulk/react-anti-patterns-props-in-initial-state-28687846cc2e

危险在于，如果组件上的 props 被更改而组件没有被“刷新”，那么新的 props 值将永远不会显示，因为构造函数（或 getInitialState）永远不会更新组件的当前状态。来自 props 的状态初始化仅在组件首次创建时运行。

这是一种解决方法：

componentWillReceiveProps(nextProps){
  if (nextProps.isFavourited!== this.props.isFavourited) {
    this.setState({ isFavourited: nextProps.isFavorited})
  }
}
于 2018-10-31T22:25:37.277 回答