Javascript react-redux类型错误：notes.map不是函数

为什么我得到

TypeError:notes.map不是notes组件下面部分中的函数<代码>{notes.map（（note）=>（

组件/Notes.js

import React, { Component } from "react"
import { connect } from "react-redux"

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

const NotesList = ({ notes }) => (
  <ul className="notes_list">
    {notes.map((note) => (
      <li className="note_body" key={note.id}>
        <div dangerouslySetInnerHTML={{ __html: note.body }}></div>
      </li>
    ))}
  </ul>
)

const Notes = connect(mapStateToProps)(NotesList);
export default Notes;

根部减压器

import { combineReducers } from 'redux'
import notes from './notes'
import noteForm from './noteForm'

const rootReducer = combineReducers({
  notes,
  noteForm
})

export default rootReducer

app.js

import React, { Component } from 'react';

import Notes from './components/Notes'
import NoteForm from './components/NoteForm'    

const App = () => (
  <div className="App">
    <NoteForm />
    <Notes />
  </div>
)

export default App

...

import notesReducer from './reducers/notes'
import { createStore } from 'redux'

const store = createStore(notesReducer) // use combineReducers when you add a 2nd reducer

const App = () => (
  <Provider store={store}>
    <div className="App">
      <NoteForm />
      <Notes />
    </div>
  </Provider>
)

index.js

...
import configureStore from './store/configureStore'
const store = configureStore()

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

。。。
从“./store/configureStore”导入configureStore
const store=configureStore（）
ReactDOM.render(
,
document.getElementById（'root'）；

您是否为门店提供了

连接

功能？如果是这样，我觉得一切都很好——查看门店初始化代码会很有用

使用

redux

中的

createStore

创建一个商店，并使用

提供商
从
react redux
包装您的
应用程序
：

app.js

import React, { Component } from 'react';

import Notes from './components/Notes'
import NoteForm from './components/NoteForm'    

const App = () => (
  <div className="App">
    <NoteForm />
    <Notes />
  </div>
)

export default App

...

import notesReducer from './reducers/notes'
import { createStore } from 'redux'

const store = createStore(notesReducer) // use combineReducers when you add a 2nd reducer

const App = () => (
  <Provider store={store}>
    <div className="App">
      <NoteForm />
      <Notes />
    </div>
  </Provider>
)

当您得到
时，map不是一个函数
，这意味着您没有正确调用数据

我看到你没有正确地呼叫各州

function notes(state = initialState, action) {
  switch (action.type) {
   ...
    default:
      return state
  }
}

将其更改为：

function notes(state = initialState.notes, action) {
  switch (action.type) {
   ...
    default:
      return state
  }
}

通常的做法是不要将状态放入数组中

const initialState = {
  id: 1, 
  body: "hey"
}

function notes(state = initialState, action) {
  switch (action.type) {
   ...
    default:
      return state
  }
}

这将很好地工作
，因为我的根减速器具有以下结构

const rootReducer = combineReducers({
  notes
})

我可以通过
state.notes.notes

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

具有以下注释的初始状态结构

const initialState = {
  notes: []
}

当您得到“map不是函数”这意味着您没有正确调用数据时，我在notes reducer页面中看到您没有正确调用状态，请将其更改为
函数注释（state=initialState.notes，action）
@Liam，谢谢，它起作用了。这样称呼它正常吗？我没有看到任何类似的例子。实际上，这取决于你。我已经用这两种方法的常规方式添加了一个答案。这两种方法都很好。我的问题中添加了存储部分。好吧，你已经用组合减速机拆分减速机了。在这种情况下，你不应该有这个广告notes的reducer initialState中的附加“notes”对象-使用CombineReducer，它将已经位于存储中的“notes”下。只需将notes的reducer initialState更改为数组：）更详细地说，您的存储当前看起来像{notes:{notes:[]}。第一个“notes”来自combineReducers呼叫，第二个来自您的初始状态。我已更新了我的答案，希望答案足够清楚：）
const mapStateToProps = (state) => {
  return { notes: state.notes.notes }
}

const initialState = {
  notes: []
}