TypeError:无法读取undefined的getState属性问题求助

嘿，我帮你定位到了问题的核心，这是一个很容易犯的JSX语法错误，马上就能修复！

错误根源 #

你遇到的TypeError: Cannot read property 'getState' of undefined，本质是React-Redux的Provider组件没有正确接收到你创建的store实例。看你的index.jsx里的渲染代码：

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

这里的store={store}被当成了Provider的子元素，而不是组件属性，导致Provider内部的store参数是undefined，自然调用store.getState()就会报错。

修复步骤 #

1. 修正Provider的传参语法

把index.jsx里的渲染代码改成正确的JSX写法，将store作为Provider的属性传入：

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import './index.css'; 
import App from './App'; 
import {createStore} from 'redux'; 
import rootReducer from './store/reducers/rootReducer'; 
import {Provider} from 'react-redux'; 

const store = createStore(rootReducer); 

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

这样Provider就能正确拿到你创建的store实例，内部的store.getState()调用就不会再出现undefined的问题。

2. 修复其他潜在小问题（避免后续报错）

除了核心错误，你的代码还有两个小问题可以一并修复：

• ProjectList的key值错误：在projectlist.jsx里，你误用了projects.id作为key，应该用遍历的单个project的id：

  import React from 'react'; 
  import ProjectSummary from './ProjectSummary'; 
  
  const ProjectList = ({projects}) => {
    return (
      <div className="project-list secion">
        {projects && projects.map(project => {
          return(
            <ProjectSummary project={project} key={project.id} />
          )
        })}
      </div>
    )
  } 
  
  export default ProjectList;
  

• ProjectReducer里的重复id：projectreducer.jsx中三个项目的id都是1，会导致React列表渲染的key冲突，改成唯一id：

  const initState={
    projects:[
      {id:1,baslik:'React Yazılım',icerik:'Geliştirme'},
      {id:2,baslik:'Redux Yazılım',icerik:'Geliştirme'},
      {id:3,baslik:'Firebase Yazılım',icerik:'Geliştirme'}
    ]
  }
  
  const projectReducer=(state=initState,action)=>{
    return state
  }
  
  export default projectReducer
  

验证修复 #

修改完成后重启项目，这个TypeError应该会立即消失，Redux的状态管理也能正常工作了。

内容的提问来源于stack exchange，提问作者mustafa arslantaş