当孩子必须更新父母的状态时,this.setState 不起作用

Posted

技术标签:

【中文标题】当孩子必须更新父母的状态时,this.setState 不起作用【英文标题】:this.setState not working when a parent's state has to be updated by a child 【发布时间】:2018-04-27 07:43:11 【问题描述】:

所以我的应用程序中有一个父组件和一个子组件。我想通过子组件更新父组件的状态,但它似乎不起作用。我已经在 Reactjs 上工作了很长时间,这对我来说很奇怪。这是我的父组件代码:

import React from 'react';
import  Stage  from 'react-konva';
import CircleComponent from './CircleComponent';
import LineComponent from './LineComponent';
import  getUserPlan  from '../../assets/UserPlan';
import  addColorClasses  from '../../helpers/utils';

class PortfolioMix extends React.Component 
  constructor(props) 
    super(props);

    const data = addColorClasses(getUserPlan().plans[0]);

    this.state = 
      data: data,
      circlePoints: []
    ;

    this.getCirclePoints = this.getCirclePoints.bind(this);
  

  getCirclePoints(points) 
    this.setState(
      circlePoints: points,
      word: 'hello'
    , () =>  console.log(this.state); );
  

  processData() 
    let data = this.state.data;

    if(data[0].weight > 0.25 || (data[0].weight+data[1].weight) > 0.67) 
      for(let i = 0; i < data.length; i++) 
        data[i].weight /= 3;
      
    

    return data;
  

  render() 
    const processedData = this.processData();
    const firstCircle = processedData.splice(0,1);
    const pmData = processedData.splice(0,this.state.data.length);

    return(
      <div>
        <Stage
          height=800
          width=1200
          style= backgroundColor: '#fff'>
          <CircleComponent
            x=1200/2
            y=800/2
            outerRadius=firstCircle[0].weight*1200
            outerColor=firstCircle[0].outerColor
            innerRadius=firstCircle[0].weight*1200*0.3
            innerColor=firstCircle[0].innerColor
            shadowColor=firstCircle[0].innerColor
            getCirclePoints=this.getCirclePoints
          />
        </Stage>
      </div>
    );
  


export default PortfolioMix;

这是子组件的代码:

class CircleComponent extends React.Component 
  constructor(props) 
    super(props);

    this.state = 
      points: this.getPoints(),
    ;
  

  componentDidMount() 
    this.props.getCirclePoints(this.state.points);
  

  getPoints() 
    const radius = this.props.outerRadius;
    const x = this.props.x;
    const y = this.props.y;

    const points = [];
    let angle = 0;

    for(let i = 0; i < 8; i++) 
      points.push(
        pointX: x + radius * Math.cos(-angle * Math.PI / 180),
        pointY: y + radius * Math.sin(-angle * Math.PI / 180)
      );
      angle += 42.5;
    

    return points;
  

  render() 
    const 
      x,
      y,
      outerRadius,
      outerColor,
      shadowColor,
      innerRadius,
      innerColor
     = this.props;

    return (
      <Layer>
        <Group>
          <Circle
            x=x
            y=y
            radius=outerRadius
            fill=outerColor
            shadowBlur=5
            shadowColor=shadowColor
          />
          <Circle
            x=x
            y=y
            radius=innerRadius
            fill=innerColor
          />
        </Group>
      </Layer>
    );
  


CircleComponent.propTypes = 
  x: propTypes.number.isRequired,
  y: propTypes.number.isRequired,
  outerRadius: propTypes.number.isRequired,
  outerColor: propTypes.string.isRequired,
  shadowColor: propTypes.string,
  innerRadius: propTypes.number.isRequired,
  innerColor: propTypes.string.isRequired,
  getCirclePoints: propTypes.func
;

export default CircleComponent;

现在,在父组件的 getCirclePoints 方法中,我从子组件那里获得积分,但 this.setState 不起作用。如您所见,我还向this.setState 回调传递了一个函数,它没有被调用并且还将data 状态设置为一个空数组。在过去的 4 个小时里,我一直在努力解决这个问题。任何形式的帮助表示赞赏。我希望我不会犯什么愚蠢的错误。

【问题讨论】:

你有没有看到任何错误,是 getCirclePoints 的父被记录的点 如果您在componentDidMount() 中登录this.state.points 会显示什么 它给了我一个我期望的对象数组。 你能在父getCirclePoints方法中记录this吗?你的瞄准镜是否正确?您是否尝试过将this 从父级传递给子级并调用这样的方法? @ArslanTariq 更新circlePoints 有什么意义?你没有用它做任何事情。 【参考方案1】:

在 React 文档中,您可以阅读到不应直接修改状态,而只能使用 setState() 方法。您确实直接两次修改了PorfolioMix 状态:

    processData:

    data[i].weight /= 3;
    

    render:

    const processedData = this.processData();
    const firstCircle = processedData.splice(0,1);
    const pmData = processedData.splice(0,this.state.data.length);
    

因为您的代码中的render 方法至少被调用了两次,所以this.state.data 将是一个导致错误的空数组。

您可以在此处查看带有错误的实时示例:https://jsfiddle.net/rhapLetv/

要修复它,您可以在processData 方法中返回数据的副本:

processData() 
  const data = this.state.data;

  if(data[0].weight > 0.25 || (data[0].weight+data[1].weight) > 0.67) 
    return data.map(point => ( ...point, weight: point.weight / 3 ))
   else 
    return data.slice()
  

带有修复的实时示例:https://jsfiddle.net/rhapLetv/1/

您可以找到有用的 immutable.js(或类似的库/帮助程序),它引入了不可变数据。

【讨论】:

【参考方案2】:

你也需要 .bind(this) processData() 方法,因为 React 只会自动绑定(this)到渲染方法、构造函数和组件生命周期方法。

class PortfolioMix extends React.Component 
  constructor(props) 
    super(props);

    const data = addColorClasses(getUserPlan().plans[0]);

    this.state = 
      data: data,
      circlePoints: []
    ;

    this.getCirclePoints = this.getCirclePoints.bind(this);
    this.processData = this.processData.bind(this);
  
// ...

【讨论】:

以上是关于当孩子必须更新父母的状态时,this.setState 不起作用的主要内容,如果未能解决你的问题,请参考以下文章

React,如何从父母那里访问孩子的状态?无需更新父母的状态

问题:为什么在我为孩子设置状态时,React为什么更新我的父母?仅发生在数组

通过孩子的状态 <Field> 组件更新父母道具

指定的孩子已经有一个父母。您必须首先在孩子的父母上调用 removeView() (Android)

触发孩子时如何更改父母的值?

当孩子依赖父母,父母依赖孩子时,浏览器如何计算宽度