父组件更改道具时子组件不会重新渲染

【问题标题】：Child component does not rerender when parent changes prop父组件更改道具时子组件不会重新渲染
【发布时间】：2020-06-24 08:19:04
【问题描述】：

父组件：

const Parent =
...
var render = {};
render.value = false;
...

return (
<div>
  <button onClick= { () => {render.value = ! render.value; console.log(render);} } >Change Prop</button>
</div>
<Child render = { render } />
...
)

子组件：

const Child = ({render}) => {
  
    useEffect(() => {
        console.log('This does not show up when i click parents button');
    }, [render]);

return (<div></div>)

难道不应该孩子因为道具改变而重新渲染吗？

【问题讨论】：

标签： reactjs render web-component use-effect use-state

【解决方案1】：

我认为您没有正确更新 render 值。试试这个：

const Parent = () => {
   const [render, setRender] = useState({})

  return (
     <div>
       <button onClick={() => setRender({...render, value: false})} >Change 
         Prop
       </button>
       <Child render={render} />
     </div>
  )
}

将父组件的状态设置为新值，然后将其作为道具传递给child 并在子组件中触发渲染

请记住在 React 组件中使用 state 来获取将更改并需要作为道具传递的值。不使用state 的唯一原因是用于不变的值

【讨论】：