React.js：props.state为空白（空）

Question

我想在React.js + Redux中使用待办事项列表。

我制作减速器文件：

import { ADD_POST, REMOVE_POST } from "../actions/index.jsx";

const initialState = {
 title: "",
 content: ""
};

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

然后，我编辑App.js：

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

const mapStateToProps = state => {
 return {
   allPosts: [state.title, state.content]
 };
};

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

而且，列表组件是...：

 render() {
   return (
     <div>
       <ul>
         {this.props.posts.map((post, index) => (
         <Item {...post} key={index} />
        ))}
       </ul>
     </div>
   );
  }
 }

我遇到错误“无法读取未定义的属性'map'”，并且无法继续。

我该如何解决？

我指的是多个来源，但是我遇到了困难，因为我只能看到一个“文本”状态和两个来源（如“标题”和“内容”状态）的文本。

-------_ FIX

我修复了错误，但是props.state为空白。 我在文本中添加了输入标签，但并不能改变所有内容。

-------动作

export const ADD_POST = "ADD_POST";
export const REMOVE_POST = "REMOVE_POST";

let nextId = 0;

export function addPost(title, content) {
 return {
   type: ADD_POST,
   id: nextId++,
   title,
   content
 };
}

export function removePost(id) {
 return {
   type: REMOVE_POST,
   id
 };
}

Answer 1

我认为您对状态的数据类型感到困惑。以下代码段可能适合您。我将您的状态保留为帖子数组，而initialState为空数组。
因此，在您的reducer文件中，将initialState初始化为：

import {
  ADD_POST,
  REMOVE_POST
} from "../actions/index.jsx";

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
        }
      ];
    case REMOVE_POST:
      return state.filter(({
        id
      }) => id !== action.id);
    default:
      return state;
  }
}

在App.js中的mapStateToProps函数中，将allPosts映射到一个数组状态。

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);