react.js - React+Redux 拖拽时,在State中放置多个组件,怎样正常更新组件状态?
问题描述
在一个项目中,使用react-dnd 拖拽<MyImage />组件到目标组件中实现预览,每次拖拽在store中生成了一个<MyImagePreview />组件,<MyImagePreview dataId={1} />组件读取store中指定的dataId的数据,实现预览一副图片的功能。
问题出现:
拖拽生成第一个<MyImagePreview />时,没有任何问题;从第二个<MyImagePreview />起,系统提示如下错误:
Warning: setState(...): Cannot update during an existing state
transition (such as withinrender
or another component's
constructor). Render methods should be a pure function of props and
state; constructor side-effects are an anti-pattern, but can be moved
tocomponentWillMount
.
根据错误信息,大概知道是不能在一个已存在的state过程,例如render中使用setState()。
伪代码:
<MyImage /*dragSource*/ > //可拖拽组件
onDrop(){
//在目标上放置时,往state里塞一个<MyImagePreview />组件,
//多次拖拽,就有多个<MyImagePreview />
myStoreState.push(<MyImagePreview />);
}
</MyImage>
<TargetArea>
//放置目标,每次放置,都重新render预览<MyImagePreview />
render(
myStoreState.map((<MyImagePreview />)=>{
<Preview /*dragSource+dragTarget*/ MyImagePreview=<MyImagePreview /> >
ImagePreview = this.props.MyImagePreview;
render(
ImagePreview
);
</Preview>
});
);
<TargetArea>
源代码太长,不知道这段伪代码是否能表达清楚我遇到的麻烦,总之,新生成一个预览,新的预览不会出问题;而之前的预览,在render加载这个组件时,就会报错。
<Preview />的实际代码:
import React from 'react';
import {Provider,connect} from 'react-redux';
import configureStore from '../../redux/store/configureStore.dev.js';
const store = configureStore()
class ToolSingleImagePreview extends React.Component {
constructor(props) {
super(props);
}
findCard(id) {
let cards = this.props.dataSource;
const card = cards.filter(c => c.id === id)[0];
return {
card,
index: cards.indexOf(card)
};
}
render() {
const {card} = this.findCard(this.props.dataId);
return (
<Provider store={store}>
<img src={card.formData.myPic} />
</Provider>
);
}
}
ToolSingleImagePreview.defaultProps = {
};
function mapStateToProps(state){
return {
dataSource:state.todoMVCReducer
}
};
export default connect(mapStateToProps)(ToolSingleImagePreview);
抱歉,是我自己的问题,有个render里写了dispatch,更新state的操作从来不能在render里进行的。。。
这篇关于react.js - React+Redux 拖拽时,在State中放置多个组件,怎样正常更新组件状态?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!