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 within render 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
to componentWillMount.

根据错误信息，大概知道是不能在一个已存在的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屋！