- android - RelativeLayout 背景可绘制重叠内容
- android - 如何链接 cpufeatures lib 以获取 native android 库?
- java - OnItemClickListener 不起作用,但 OnLongItemClickListener 在自定义 ListView 中起作用
- java - Android 文件转字符串
我试图在从子组件更改状态后更新状态但没有成功,每次我调用该函数时都会出现堆栈溢出,prop 无限次调用该函数,但问题是,我真的需要更新这个状态,目前不知道如何解决这个问题。
父级
import React, { PropTypes, Component } from 'react';
import Card from './card/card.js';
import style from './style.scss';
class Container extends Component {
constructor(props) {
super(props);
this.state = {
isFlipped: false,
oneOpened: true,
history: [],
childFlipToFalse: false,
};
this.historyToggleStates = this.historyToggleStates.bind(this);
this.forceFlipParent = this.forceFlipParent.bind(this);
this.checkForceFlip = false;
}
historyToggleStates(bool, id, callForceFlip) {
this.setState({
history: this.state.history.concat([{ opened: bool, id }]),
}, () => {
console.log('inside historyToggleStates');
if (callForceFlip) {
this.forceFlipParent()
}
});
}
forceFlipParent() {
const { history } = this.state;
const first = history[0];
const last = history[history.length - 1];
const beforeLast = history[history.length - 2];
console.log('force FLIP PARENT');
if (history.length > 1) {
if (JSON.stringify(last.opened) === JSON.stringify(beforeLast.opened)) {
this.setState({ childFlipToFalse: true });
}
}
}
render() {
const rest = {
basePath: this.props.basePath,
backCard: this.props.backCard,
isShowing: this.props.isShowing,
historyToggleStates: this.historyToggleStates,
isOpened: this.state.isOpened,
isFlipped: this.state.isFlipped,
checkOneOpened: this.checkOneOpened,
history: this.state.history,
forceFlip: this.state.childFlipToFalse,
flipToFalse: this.forceFlipParent,
};
const cardsMap = this.props.cards.map((item, key) => {
return (
<Card
item={item}
keyId={key}
{...rest}
/>
);
});
return (
<div className="col-lg-12 text-center">
{cardsMap}
</div>
);
}
}
export default Container;
Container.propTypes = {
cards: PropTypes.array.isRequired,
item: PropTypes.func,
basePath: PropTypes.string,
backCard: PropTypes.string,
isShowing: PropTypes.bool,
};
child
import React, { Component, PropTypes } from 'react';
import ReactCardFlip from 'react-card-flip';
import style from './style.scss';
class Card extends Component {
constructor(props) {
super(props);
this.state = {
isFlipped: false,
update: false,
id: 9999999,
};
this.handleClick = this.handleClick.bind(this);
this.checkOneOpened = this.checkOneOpened.bind(this);
}
componentWillReceiveProps(nextprops) {
const { history, isFlipped, historyToggleStates } = this.props;
const last = nextprops.history[nextprops.history.length - 1];
const beforeLast = nextprops.history[nextprops.history.length - 2];
console.log(history);
console.log(nextprops.history);
if (nextprops.forceFlip && last.id === nextprops.keyId) {
this.setState({ isFlipped: !this.state.isFlipped, update: true, id: last.id }, () => {
console.log('callback willreceiveprops', this.state.isFlipped);
historyToggleStates(this.state.isFlipped, nextprops.keyId, true, this.state.update); **<--- Here's my problem**
});
}
if (nextprops.forceFlip && beforeLast.id === nextprops.keyId) {
this.setState({ isFlipped: !this.state.isFlipped, update: true, id: beforeLast.id }, () => {
});
}
}
handleClick(e, nextState, id) {
const { keyId, historyToggleStates, forceFlip } = this.props;
if (e) {
e.preventDefault();
}
if (!nextState) {
this.setState({ isFlipped: !this.state.isFlipped }, () => {
historyToggleStates(this.state.isFlipped, keyId, true, this.state.update);
});
} else {
// historyToggleStates(nextState, id, false);
return 0;
}
}
checkOneOpened(e) {
if (!this.props.isShowing) {
this.handleClick(e);
}
}
render() {
const { item, basePath, backCard, isShowing, isFlipped, forceFlip } = this.props;
return (
<div className={`col-lg-2 col-md-3 col-sm-6 ${style.card}`}>
<ReactCardFlip
isFlipped={this.state.isFlipped}
flipSpeedBackToFront={0.9}
flipSpeedFrontToBack={0.9}
>
<div key="front">
<button
onClick={() => {this.checkOneOpened()}}
>
<img src={isShowing ? `${basePath}${item.image}` : backCard} alt={item.name} className={`${style.img}`} />
</button>
</div>
<div key="back">
<button
onClick={() => {this.checkOneOpened()}}
>
<img src={isShowing ? backCard : `${basePath}${item.image}`} alt={item.name} className={`${style.img}`} />
</button>
</div>
</ReactCardFlip>
</div>
);
}
}
export default Card;
Card.propTypes = {
basePath: PropTypes.string,
backCard: PropTypes.string,
isShowing: PropTypes.bool,
historyToggleStates: PropTypes.func,
isOpened: PropTypes.bool,
isFlipped: PropTypes.bool,
checkOneOpened: PropTypes.func,
};
historyToggleStates(this.state.isFlipped, nextprops.keyId, true, this.state.update) 是我问题的根源,我真的需要更新它,因为我正在将他内部的数组与另一个数组进行比较
更新 1:我知道我对 historyToggleStates 的调用是在几个案例中完成的,但正如您所看到的,我需要从父级更新我的状态,因为我每次都在我的子组件的 componentWillReceiprops 中比较这个值。
这种情况真的需要状态管理器吗?我正在遵循 Dan Abramov 中的提示,并避免增加系统的复杂性,任何提示将不胜感激。
最佳答案
子组件的 componentWillReceiveProps
,首先在父组件使用新 Prop 更新时触发,触发父组件的更新(使用 historyToggleStates
) .
但是对于这个周期取决于以下几点:
if (nextprops.forceFlip && last.id === nextprops.keyId) {
即如果组件传入的 prop 的 keyId
与历史记录中的最后一个组件的 keyId
相同。换句话说,当子级更新时,如果 forceFlip
为真,则历史记录中的最后一个组件将始终运行此代码块。
forceFlip
的值取决于以下内容:
if (history.length > 1) {
if (JSON.stringify(last.opened) === JSON.stringify(beforeLast.opened)) {
即forceFlip
如果历史记录中的最后两个组件同时打开,则设置为 true。
然后,正如您所说,historyToggleStates
被触发,父级得到更新,子级的 componentWillReceiveProps
被触发,然后循环重复。
可能的解决方法
现在我认为它是有意设计的,如果最后两张牌同时打开,它们必须被强制翻转,即关闭。
为了实现这一点,我建议不要将卡片的状态保留在卡片组件中,而是将其拉至父组件状态并让子卡片组件不可知。在父级中,维护类似 cardsState
(也许是更好的名字)的东西,并用它来决定是否必须打开卡片。如果您检测到最近两个同时打开的卡片在历史记录中处于打开状态,只需将它们的状态设置为 false 即可关闭它们。
这将使您摆脱对 forceFlip
变量的依赖,并使您的子卡片组件更简单 - 只有在状态显示打开时才打开它们。
关于javascript - componentWillReceiveProps 和 componentDidUpdate 无限循环,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45270253/
我正在使用使用 ReactSwipableView 包的 Material ui SwipeableViews,我在控制台上收到此错误 react-dom.development.js:12466 W
在我的其他类中,componentWillReceiveProps 工作得很好,但由于某种原因,它在这里没有触发。 ItemView.jsx class ItemView extends React.
我对 React 开发还很陌生,但我已经使用 React+Redux 开发了 3 个大项目,并且我看到了一个我非常不喜欢的模式: componentWillReceiveProps(nextProps
我在构造函数中定义了一个状态,就像这样 this.state={ datainaccordion:'', }; 现在在我的 componentWil
我有以下组件代码: var Answer = React.createClass({ getInitialState: function(){ return { comments:
我在 React 中遇到了一个大问题 - 可能是缺乏理解。我有一个进行回调的子组件,并具有一个 componentWillReceiveProps 函数。问题是我无法在 child 持有的文本输入上书
我最近想升级我的知识React ,所以我从组件生命周期方法开始。让我好奇的第一件事是这个componentWillReceiveProps .所以,文档说当组件接收新的(不一定是更新的) Prop 时
我有以下高阶组件来在我的组件上创建一个负载: import React, {Component} from 'react'; import PropTypes from 'prop-types'; i
我正在尝试在收到新 Prop 后立即更新子组件。但是,我的子组件中的 componentWillReceiveProps() 在 Prop 实际更新之前被调用。看完this article我明白为什么
在我的子组件中使用以下方法更新 Prop 更改状态,效果很好 componentWillReceiveProps(nextProps) { // update original state
我的直觉告诉我不行,但我很难想到更好的方法。 目前,我有一个显示项目列表的组件。根据提供的 props,此列表可能会发生变化(即过滤更改或上下文更改) 例如,给定一个新的 this.props.typ
所以我是 react 新手,想知道如何创建一个传递一些参数的页面并根据这些参数获取文档。但是,当我尝试使用 componentWillReceiveProps 时,我发现它没有运行,我不知道为什么。那
我是 React 新手,正在经历 React 的生命周期,但是我对 componentWillReceiveProps 的使用有点困惑。 谁能解释一下在什么情况下应该使用它。 谢谢。 最佳答案 当 p
我有一个由react-router (path="profile/:username") 加载的Profile 组件,该组件本身如下所示: ... import { fetchUser } from
这个问题已经有答案了: Can getDerivedStateFromProps be used as an alternative to componentWillReceiveProps (1 个
我通读了https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html#fetching-external-data-when-p
我是 React/Redux 新手,并且对状态有疑问。 TrajectContainer.jsx class TrajectContainer extends React.Component {
我有一个组件,它由父组件通过传递 prop 来更新。在 componentWillReceiveProps 中,我想更改一个状态(availableData),其中包含来自 prop(newData)
在我拥有的组件中,我使用 componentWillReceiveProps() 异步设置组件中的多个状态。父组件正在向该子组件发送新的 props。我的期望是,每当 child 获得新的 Prop
我有一个连接到 redux 存储的组件,并且有一个如下所示的代码块: if (this.props.person !== nextProps.person) { ... } else {
我是一名优秀的程序员,十分优秀!