Question

尝试用我自己的例子实现ReactRedux，我有点挣扎。看起来好像我的道具没有给出任何值，并且在React渲染它们时仍未定义。我的方法总体上是否正确，只是一个简单的错误，或者是否存在真正的错误？

我在jsbin中重新创建了我的问题：

class Walls extends React.Component {
    render() {
    return (
        <div id="main">
            <div>volume: {this.props.volume}m³</div>
        </div>
    )}
}

const mapStateToProps = (state) => {
    return {
        volume: state.volume
    };
}

const WallContainer = connect(mapStateToProps)(Walls);

function reducer(state = Map(), action) {
  switch (action.type) {
  case 'SET_STATE':
    return state.merge(action.state);
  }
  return state;
} 

const store = createStore(reducer)
store.dispatch({
    type: 'SET_STATE',
    state: {"volume":1567.571734691151}
})

ReactDOM.render(
        <Provider store={store}>
            <WallContainer />
        </Provider>, 
        document.getElementById('root')
);

Answer 1

您必须在连接时从Immutable Map映射回来，否则您的方法对我来说是正确的：

const mapStateToProps = (state) => {
    return {
        volume: state.get('volume')
    };
}

请注意，此时state仍然是一个不可变的Map，而不仅仅是一个JavaScript对象。

Redux：渲染时未定义道具

1 个答案: