Question

我使用React.js + Redux制作待办事项应用。

但是，我发生了错误“ TypeError：this.props.posts.map不是函数”

我的App.js：

class App extends Component {
render() {
  return (
    <div className="App">
      <Input />
      <List posts={this.props.allPosts} />
    </div>
  );
 }
}

const mapStateToProps = state => {
  return {
    allPosts: state
  };
};

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

我的列表组件：

class List extends Component {
  render() {
   console.log(this.props.posts);
   return (
    <div>
      <ul>
        {this.props.posts.map((post, index) => (
         <Item {...post} key={index} />
        ))}
      </ul>
    </div>
    );
  }
}

我的减速器：

const initialState = [];

export default function Post(state = initialState, action) {
  switch (action.type) {
   case ADD_POST:
     return [
     ...state,
     {
      id: action.id,
      title: action.title,
      content: action.content
     }
   ];

为什么会发生错误？我设置了console.log，但是它是未定义的...

----编辑

codesandbox链接：https://codesandbox.io/s/x91zl9v78p

Answer 1

在化简器的default语句中没有switch分支，这将使其默认返回undefined。

您可以添加一个只返回状态的default分支。

const initialState = [];

export default function Post(state = initialState, action) {
  switch (action.type) {
    case ADD_POST:
      return [
      ...state,
      {
        id: action.id,
        title: action.title,
        content: action.content
      }
    ];
    default:
      return state;
  }
}

还必须确保将state.post设置为allPost，而不是整个Redux状态。您也无需在connect组件上使用Item，因为无论如何您都将title和content用作道具。

const mapStateToProps = state => {
  return {
    allPosts: state.post
  };
};

反应：this.props.posts.map不是一个函数

1 个答案: