当 parent 的状态必须由 child 更新时，this.setState 不工作

Question

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

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;

这里是 child 组件的代码：

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;

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

Answer 1

您也需要 .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);
  }
// ...

Answer 2

在 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/

要修复它，您可以 return 复制 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（或类似的 libraries/helpers），它引入了不可变数据。

当 parent 的状态必须由 child 更新时，this.setState 不工作

this.setState not working when a parent's state has to be updated by a child

javascript

reactjs

state

react-props