React useEffect 不重新渲染功能组件答案

【问题标题】：React useEffect not re-rendering functional componentReact useEffect 不重新渲染功能组件
【发布时间】：2020-01-06 20:41:40
【问题描述】：

我将访问令牌作为道具传递给功能组件。当访问令牌发生更改时，我需要重新渲染功能组件。当所述访问令牌发生更改时，我正在使用 useEffect 来设置状态。它没有按预期重新渲染。

const Panel = (props) => {

  const [accessToken, setAccessToken] = useState('');

  useEffect(() => {
    setAccessToken(props.accessToken)
  }, [props.accessToken])

  return (...)
}

预期：props.accessToken 更改后面板重新渲染。

实际：面板不会使用更新的 props.accessToken 值重新渲染。

【问题讨论】：

您的代码一切正常。你能提供一个reproducible example
您是否验证了 accessToken 的定义值已传递给 Panel？即，根据初始状态不是'' 的值？
@DacreDenny 我如何在 Panel 中验证这一点？我在useEffect中尝试了控制台日志，它为accessToken返回null。 accessToken 值在父组件中由 api 调用定义，该调用使用“this.accessToken = response.data”设置令牌值。然后，
如果在useState行前加上console.log("props.accessToken=", props.accessToken)，会记录什么？
由于公司政策，我无法发布源代码。但是，在父组件中，我没有将访问令牌值设置为 this.accessToken，而是将访问令牌值设置为 state。这似乎可以解决问题。那么这是否意味着组件变量更改不会传递给子组件，除非它是状态变量？

标签： reactjs

【解决方案1】：

根据您的评论，

accessToken 值是通过 api 调用在父组件中定义的，该调用使用“this.accessToken = response.data”设置令牌值。那么，<Panel accessToken={this.accessToken} />

组件不会根据本地实例变量重新渲染，在您的情况下为 this.accessToken。

你需要将token实际设置为state，然后传递给子组件。

this.setState({accessToken : response.data})

然后从状态中传递，

<Panel accessToken={this.state.accessToken} />

【讨论】：