传入 Redux 存储的对象在 mapStateToProps 后未反映所有键/值 [英] Object passed into Redux store is not reflecting all key/values after mapStateToProps

问题描述

我有一个动态生成切换按钮的组件.现在，我只是想让它在基本级别上工作，所以你点击一个按钮，它会向 cuts = {} 添加一个键/值对.

I have a component where toggle buttons are dynamically generated. Right now, I am just trying to get it working at a basic level so you click on a button and it adds a key/value pair to the cuts = {}.

点击多个按钮后，cuts 应该有几个键/值对:它在 cuts 所在的组件中执行，在操作中执行，并且执行在 Redux 存储中通过 console.log(state.cuts).

After clicking on multiple buttons the cuts should have several key/value pairs: it does in the component where cuts resides, it does in the action, and it does in the Redux store via console.log(state.cuts).

然而，在 mapStateToProps 之后它只显示第一个值，我不知道为什么.

However, after mapStateToProps it is only showing the first value and I am not sure why.

无论如何，这是我的代码和用户启动的流程:

Anyway, here is my code and the flow as it is initiated by the user:

// bq_cuts.js component
constructor(props) {
    super(props);
    this.state = {
        cuts: {}
    }
}

onCutSelect(cut) {
    const { bqResults } = this.props;
    const { cuts } = this.state;

    let key = cut.name;
    let value = cut.value;

    cuts[key] = value;
    this.setState({
        cuts
    })
    console.log(cuts); // shows all of the selected cuts here
    bqResults(cuts);
}

<小时>

// results.js actions
export function bqResults(results) {
    console.log(results); // shows all of the selected cuts here
    return function(dispatch) {
        dispatch({
            type: FILTER_RESULTS,
            payload: results
        })
    }
}

<小时>

// results.js reducer
import {
    FILTER_RESULTS
} from '../actions/results';

export default function(state = {}, action) {
    switch(action.type) {
        case FILTER_RESULTS:
            console.log(action.payload); //prints out all the cuts
            return {
                ...state,
                filter_results: action.payload
            }
        default:
            return state;
    }

    return state;
}

const rootReducer = combineReducers({
    results: resultsReducer,
});

export default rootReducer;

<小时>

// bq_results.js component where the FILTER_RESULTS is accessed
render() {
    console.log(this.props.filter_results); // only shows the first result
    return (<div>...</div>)
}


function mapStateToProps(state) {
    console.log(state.results.filter_results); // shows all selected cuts here
    return {
        filter_results: state.results.filter_results,
    }
}

也许更好的表达方式是，在将初始状态映射到 props 之后，它不再接收状态更改并将其映射到 props.

Maybe a better way of putting it is it seems like after the initial state is mapped to props, it is no longer receiving changes to state and mapping it to props.

推荐答案

偶然发现这篇文章并使用了方法#2:

Came across this article and used Approach #2:

https://medium.freecodecamp.org/handling-state-in-react-four-immutable-approaches-to-think-d1f5c00249d5

最后:

onCutSelect(cut) {
    let cuts = {...this.state.cuts, [cut]: cut}
    this.setState({
        cuts
    }, () => this.props.bqResults(this.state.cuts));

}

这篇关于传入 Redux 存储的对象在 mapStateToProps 后未反映所有键/值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！