Reactjs 钩子如何更新传递给组件的道具?

Reactjs 钩子如何更新传递给组件的道具?,reactjs,react-hooks,Reactjs,React Hooks,我有一个组件正在传递一个道具,当道具的值改变时,我需要该组件进行更新 我已经尝试使用useEffect钩子来观察props和prop.propi的变化,但是我无法在渲染后将更新传递到组件 App.js let tracker = true; const handleChangeTracker = () => { tracker = !tracker } const App = props => { <React.Fragment> <button

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

我已经尝试使用useEffect钩子来观察props和prop.propi的变化,但是我无法在渲染后将更新传递到组件

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>
}
const Component1 = props => {

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

  return (  
    <div>{props.active && "You see this when its true"}</div>  
  )
}
let tracker=true;
常量handleChangeTracker=()=>{
跟踪器=!跟踪器
}
const App=props=>{
改变
}
组件1.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>
}
const Component1 = props => {

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

  return (  
    <div>{props.active && "You see this when its true"}</div>  
  )
}
const Component1=props=>{
useffect(()=>{
console.log(props.active)
},[props.active])
报税表(
{props.active&&“当它为真时您会看到它”}
)
}

单击按钮时,我希望tracker的值在true和false之间切换。然后我希望它将新值传递给Component1。当前,它将更改值(我通过控制台日志跟踪它),但不会将新值传递给组件。

该值不会传递给子组件,因为“跟踪器”变量未存储在状态中。状态值的更改触发新渲染,而不是变量值的更改

因此,当在“handleChangeTracker”中更新“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>
}
this.state={tracker=true;}
常量handleChangeTracker=()=>{
这是我的国家({
跟踪器:!跟踪器
})
}
const App=props=>{
改变
}

useEffect的拼写是错误的。这只是一个将代码传递过来的打字错误,一切都很好。是的,我已经发布了一个解决方案。试试看,让我知道这是否有效:-)这非常有效!我不知道传递的prop值必须处于状态才能导致新的渲染。非常感谢你。