Question

我正在使用redux进行响应，而组件与商店中的列表相连的组件出现问题。我有一个列表，每当我单击它时，都会添加一个对象或使用select操作将其从列表中删除，并且我有一个连接到状态的组件来获取列表，并且如果列表为空，length == 1或>则呈现不同的状态。 = 1。该列表开始为空，当我添加第一个对象时，将执行该操作并重新渲染该组件，如果再次触发该操作，该组件将不再呈现，但是我可以在控制台中看到下一个状态具有所有选定的元素。我想念什么？

//Component that executes action:


const mapDispatchToProps = dispatch => {
  return {
select: selected => dispatch(select(selected))
  };
};

class AnimatedlistComponent extends Component {

    constructor(props) {
        super(props)
        this.state = {selected: {}}
    }

    onItemClick(d) {
        console.log("selected " + d)
        let selected = this.state.selected
        if (this.state.selected[d.id]) {
            delete selected[d.id]
            this.props.select(selected)
        } else {
           selected[d.id] = d
           this.props.select(selected)
        }
    }

    render() {
     
        const childElements = this.props.detectors.map(u => {
            return (
                <ListGroupItem id={'list' + u.id} className='detectorlistElement' key={u.id} style={elementStyle}
                               onClick={() => this.onItemClick(u)}>
                    <Glyphicon glyph="tag"/> {u.name}
                </ListGroupItem>

            );
        });

        return (
            <div>
                <p style={headerStyle}><b>Dector list</b></p>
                <ListGroup id={"detectorList"}>
                    {childElements}
                </ListGroup>
            </div>
        );
    }

}
export default connect(null,mapDispatchToProps)(AnimatedlistComponent)



   // Component that receives prop:

function mapStateToProps(state) {
    return {Selected: state.reducer.Selected }
}
@connect(mapStateToProps)
class MiddlePanel extends Component {
  constructor(props) {
    super(props);

  }
componentWillReceiveProps(){
      console.log("receive new props")
}
  render() {
      console.log("render middle")
    const Selected = this.props.Selected;
    let middlepanel
    if (Object.keys(detectorsSelected).length >1) {
      middlepanel = <div>mas que uno</div>;
    } else if (Object.keys(detectorsSelected).length === 0){
      middlepanel = <div>Ninguno</div>
    }else if (Object.keys(detectorsSelected).length === 1){
        middlepanel = <div>uno</div>
    }
    return (
      <div>
        {middlepanel}
      </div>
    );
  }
}

  //  Action:

export function select(Selected) {
    return {
        type: types.SELECT,
        Selected: Selected
    }
};
   // Reducer:

Reducer(state = {
                Selected: {}
            }, action = null) {
switch (action.type) {
case types.SELECT:
      return Object.assign({}, state, {Selected: action.Selected});
        
        default:
            return state;
    }
};

Answer 1

我发现您的代码存在一些问题，请指出：
1.在AnimatedlistComponent内部，您有selected处于状态的对象，但您没有在render函数中使用它，实际上似乎不需要它。如果省略了render方法的某些部分，而您正在从状态使用selected对象，那么一旦更改对象，就应该设置状态。
2.您的AnimatedlistComponent组件似乎已受到一半控制。您要将数据保存在两个位置，一次处于应用程序状态（使用redux更新其他组件时），一次处于组件中，这不是一个好习惯。您应该将其保存在一个位置并保持同步。
3.导致您遇到问题的问题实际上是因为您保留对原始selected对象的引用，而不是对其进行复制。您应该在减速器中执行以下操作：return Object.assign({}, state, {Selected: {...action.Selected}});以实现不变性。

如果我的回复不够有用，请随时发表评论。

组件未收到新道具

1 个答案: