javascript - React.js : props. 状态为空白(null)

Question

我想使用 React.js + Redux 来创建待办事项列表。

我制作 reducer 文件:

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

我遇到错误“无法读取未定义的属性‘映射’”并且无法继续。

如何修复它？

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

--------修复

我修复了错误，但 props.state 为空。我添加了带有文本的输入标签，但它并没有改变一切。

-------- Action

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

我认为您对您所在州的数据类型感到困惑。下面的代码片段可能适合您。我将您的状态保存为帖子数组，且初始状态为空数组。
因此，在您的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映射到state，它是一个数组。

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