JavaScript | ReactJS：父状态更改不触发子道具更新

Posted 2023-03-27

【中文标题】JavaScript | ReactJS：父状态更改不触发子道具更新

【英文标题】：JavaScript | ReactJS: Parent State-Change Not Triggering Child Props Update

【发布时间】：2016-09-18 01:09:40

【问题描述】：

父 setState 触发 render()，但子组件的 props 是静态的

这很简单。我有 <Parent /> 带有状态属性和处理程序。父级将属性和处理程序都传递给子级。

孩子有一个按钮并调用它自己的处理程序，该处理程序包装了父母的处理程序。一个布尔值 isNew 被传递给 Parent —— Parent 调用 this.setState( isNew: isNew )。

Parent 总是调用 render 并且在 Parent 的 html 中输出 isNew 表明一切都是正确的。但是，<Child isNew=this.state.isNew /> 永远不会从 this.props.isNew 输出正确的值——它总是在 Parent 的 getInitialProps 方法中的 Parent 中初始化的值。

我刚进入这个项目，但我不相信我们正在实施 Flux 或 Redux。我的假设是，开箱​​即用的 React应该重新渲染所有其 props 设置为父级状态的子级。

换句话说，如果我有以下情况：

React.createClass(
    render: function () 
        return (<Child isNew=this.state.isNew handler=this.handler />);
    
);

当父级 [from a state-change] 重新渲染时，所有依赖父级状态的子级也应该重新渲染，同时将父级的新状态封装在其 props 中；假设子属性为<Child property=this.state.property />

我在这里完全错过了一些基本的东西吗？

请直接告诉我：)

谢谢

【问题讨论】：

您的假设是完全正确的，这在我制作的这个小提琴中得到了证明jsfiddle.net/69z2wepo/42845 我认为您需要发布更多代码以查看错误的来源，特别是您提到的方法包装器......但是您也可以发布父组件和子组件的内容。

【参考方案1】：

我认为您在子构造函数中设置了 this.props.isNew 并尝试打印它..

孙子：

import React,  Component  from 'react';

class GrandChild extends Component 
  constructor(props) 
    super(props);
    this.toogle = this.toogle.bind(this);
  

  toogle(e) 
    if (e) 
      e.preventDefault();
    
    this.props.toogleParent(!this.props.isNew);
  

  render() 
    console.log('in grand child', this.props.isNew);
    return (
      <div>
        <a onClick=this.toogle href="">click</a>
      </div>
    );
  


export default GrandChild;

子组件：

import React,  Component  from 'react';
import GrandChild from './grand';


class Child extends Component 
  render() 
    console.log('in child', this.props.isNew);
    return (
      <div>
        <GrandChild ...this.props />
      </div>
    );
  


export default Child;

父组件：

import React,  Component  from 'react';
import Child from './child';

class MainPage extends Component 
  constructor(props) 
    super(props);
    this.state = 
      isNew: false
    ;
    this.toogleParent = this.toogleParent.bind(this);
  

  toogleParent(isNew) 
    this.setState( isNew );
  

  render() 
    console.log('in parent', this.state.isNew);
    return (
      <div>
        <h3>Main page</h3>
        <Child isNew=this.state.isNew toogleParent=this.toogleParent />
      </div>
    );
  


export default MainPage;

输出：

在父级中 在孩子真实 孙子真

在父级错误 在孩子假 孙子假

等等。

【讨论】：

嗯，这可能是我应该发布一些代码的地方，但我正在进行的项目是一场灾难。实际上，上面的“<Child />”实际上是<Grandchild />，但是当我从 Child 中取出 Grandchild 并使其成为 Parent 的直系后裔时，一切正常。孙辈没有收到祖父母的更新是否有任何典型原因？

我已经用孙子改变了例子，这是可行的，没有障碍不要使用孙子。