当孩子必须更新父母的状态时,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为什么更新我的父母?仅发生在数组