React-Redux：Uncaught TypeError：无法读取未定义的属性“name”

Posted 2021-05-05

我是Redux世界的新手，我正在尝试将其与React连接。我已经构建了我的应用程序：

index.js：

const userReducer = (state={
  name: "max"
}, action) => {

  switch(action.type){
    case "SET_NAME":
      state = {
        ...state,
        name: action.payload
      };
    break;
  return state;
};

const myLogger= (store) =>(next)=>(action)=>{
  console.log("logged action: ",action);
  next(action);
};
const store = createStore(combineReducers({user: userReducer}),{}, applyMiddleware(myLogger,logger));

store.subscribe(()=>{
  console.log("Store upadated", store.getState());
});

ReactDOM.render(

   <BrowserRouter>
    <Provider store={store}>
    <App/>
    </Provider>
  </BrowserRouter>,

    window.document.getElementById('container')); 

app.js：

class App extends React.Component{

      render(){
        return(

        <div>
         <SearchBar
           username = {this.props.user.name}/>
        </div>
       )
      }  
    }

    const mapStateToProps = (state) => {
      return{
        user: state.user,
        math: state.math
      };
    };

    const mapDispatchToProps = (dispatch) => {
      return{
        setName: (name) =>{
            dispatch({
                type: "SET_NAME",
                payload: name
            });
        }
      };
    };

    export default connect(mapStateToProps, mapDispatchToProps)(App);

searchBar.js：

export default class SearchBar extends React.Component{

    render(){
        return(
            <div>
                Name: {this.props.username}
            </div>
        )
    }
}

似乎name的userReducer变量在我试图将其传递给SearchBar组件时未被识别。

我不知道为什么？我是否通过尝试使用index.js提供商店来构建我的Provider错误？或者我的连接功能可能有问题？

错误：

Uncaught TypeError: Cannot read property 'name' of undefined
    at component (app.js:141)
    at mountIndeterminateComponent (react-dom.development.js:8574)
    at beginWork (react-dom.development.js:8978)
    at performUnitOfWork (react-dom.development.js:11814)
    at workLoop (react-dom.development.js:11843)
    at htmlUnknownElement.callCallback (react-dom.development.js:100)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:138)
    at invokeGuardedCallback (react-dom.development.js:187)
    at replayUnitOfWork (react-dom.development.js:11318)
    at renderRoot (react-dom.development.js:11885)

答案

我认为你的代码应该可行，或者你的导入错误，我唯一看到的缺点是括号：

switch(action.type){ case "SET_NAME": state = { ...state, name: action.payload }; break; } return state; }

我认为您的提供商也应该包装路由器。但目前，这不应该阻止。

您还可以使用redux dev工具（浏览器扩展）来查看问题的来源：

要使用它，请将此行添加到index.js：

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(combineReducers({user: userReducer}), composeEnhancers(applyMiddleware(myLogger)));

另一答案

在redux中......你永远不会改变状态的原始副本......你需要在执行每个动作时返回一个新副本。

并且您还需要在执行任何操作之前返回初始值...认为您的switch default case ...对于appx加载的redux存储初始化

const userReducer = (
      state = {
        name: 'max',
      },
      action,
    ) => {
      switch (action.type) {
        case 'SET_NAME':
          return {
            ...state,
            name: action.payload,
          };

        default:
          return state;
      }
    };