Question

在我的反应项目中，我已经连接了redux并添加了一个带有一个键和值对的对象的减速器：＆＃34; key：＆＃39; hello＆＃39;＆＃34;。我将它导入我的reducers文件夹中的index.js，并尝试使用MapStateToProps在容器内使用它。无论出于何种原因，价值都不会出现！当我在console.log this.props.reducer时，我返回了正确的对象，但是当我输入this.props.reducer.key时，我返回了“未定义的”＃39;。为什么会这样？我之前从未遇到过这个问题......

这是我的App.js

import React, { Component } from 'react';
import FirstComponent from './components/firstComponent.js';
import FirstContainer from './containers/firstContainer.js';

class App extends Component {
  render() {
    return (
      <div className="App">
        <FirstComponent />
        <FirstContainer />
      </div>
    );
  }
}

export default App;

我的减速机：

export default function() {
    return [
        {
            key: 'hello',
        }
    ]
}

我在reducers文件夹中的index.js

import { combineReducers } from 'redux';
import firstReducer from './reducer.js';

const rootReducer = combineReducers({
    reducer: firstReducer
});

export default rootReducer;

我的容器：

import React from 'react';
import { connect } from 'react-redux';

class FirstContainer extends React.Component {
    render() {
        return(
            <div>
                value: {this.props.reducer.key}
            </div>
        );
    }
}

function mapStateToProps(state) {
    return {
        reducer: state.reducer
    };
}

export default connect(mapStateToProps)(FirstContainer);

我应该看到：＆＃39;价值：你好＆＃39;在我的屏幕上，但我只是看到了价值：＆＃39;显示

Answer 1

为什么你的reducer返回一个数组并且不接受任何参数？

通常reducer看起来有点像这样，所以它接受2个params（第一个是应用程序的先前状态）并返回一个对象

const initialState = { key: 'not hello' };

expert default functions(prevState = initialState, value) {
   const newStateObject = { key: value };

   return newStateObject;
}

Answer 2

你的reducer不正确，你可以设置初始状态，然后该函数应该返回状态不变，或者如果它接收到它感兴趣的动作则返回下一个状态。

const initialState = { key: 'hello'};

export default function(state = initialState, action) {
    switch (action.type) {
       // dispatch({ type: 'UpdateKey', value: 'new value' })
       case 'UpdateKey': {
         return {
           ...state,
           key: action.value,
         };
       }
    }

    return state;
}

React和Redux：当使用mapStateToProps时，为什么我的值不是从reducer中显示的

2 个答案: