Question

我有一个正在传递道具的组件，当道具的值更改时，我需要该组件进行更新。

我尝试使用useEffect钩子来查看props和prop.propIWantToChange，但是在渲染后无法将更新传递给组件。

App.js

let tracker = true;

const handleChangeTracker = () => {
  tracker = !tracker
}

const App = props => {
  <React.Fragment>
    <button onClick={handleChangeTracker} >Change</button>
    <Component1 active={tracker} />
    <Component2 />
    <Component3 />
    <Component4 />
  </React.Fragment>
}

Component1.js

const Component1 = props => {

  useEffect(() => {
    console.log(props.active)
  }, [props.active])

  return (  
    <div>{props.active && "You see this when its true"}</div>  
  )
}

单击按钮时，我希望跟踪器的值在true和false之间切换。然后，我希望它将新值传递给Component1。当前，它将更改该值（我通过控制台日志对其进行跟踪），但不会将新值传递给组件。

Answer 1

该值未传递到子组件，因为您的'tracker'变量未存储在状态中。状态值的更改触发一个新的呈现，而不触发变量值的更改。

因此，当在'handleChangeTracker'中更新'tracker'时，它不会触发新的渲染，因此新值不会传递给子组件，因此也不会对子组件进行新渲染。

解决方案是将“ tracker”保存为一个状态，然后在“ handleChangeTracker”中更新该状态。

this.state = { tracker = true; }

const handleChangeTracker = () => {
  this.setState({
            tracker: !tracker
        })
}

const App = props => {
  <React.Fragment>
    <button onClick={handleChangeTracker} >Change</button>
    <Component1 active={this.state.tracker} />
    <Component2 />
    <Component3 />
    <Component4 />
  </React.Fragment>
}

挂钩如何更新传递给组件的道具？

1 个答案: