reactjs - 反应redux意外令牌

Question

    import React, { Component } from "react";
    import { Link } from "react-router-dom";
    import { getPosts, deletePost } from "../actions/postActions";
    import { connect } from "react-redux";
    import PropTypes from "prop-types";
    import { USERS_LOADING } from "../actions/constants";
    import PostModal from "./PostModal";
    
    class Post extends Component {
      componentDidCatch(){
        this.props.getPosts();
      }
    
      onDeleteClick = (id) => {
    this.props.deletePost(id);
      }
    
      render() {
        const {posts} = this.props;
        return(
          {posts.map(({_id, text, title}) => (
    
          <div className="container-mostouter" key={_id}>
            <div className="container-post">
              <div className="container-outer">
                <div className="container-inner">
                  <h3>{title}</h3>
                  <p className="postpar">
                    {text}
                    <br />
                    <Link to="/PostPage">Read More</Link>
                  </p>
                </div>
              </div>
            </div>
            <button onClick={this.onDeleteClick.bind(this, _id)}>Add</button>
          </div>
          ))}
          );
      }
    }
    
    Post.propTypes = {
      getPosts: PropTypes.func.isRequired,
      post: PropTypes.object.isRequired
    };
    
    const mapStateToProps = (state) => ({
      post: state.post
    });
    
    export default connect(mapStateToProps, { getPosts })(Post);

---

问候，

由于某种原因，我不断收到来自“{posts.map(({_id, text, title}) =>”部分的意外错误。

解析错误：意外的令牌，预期的“，”

我正在尝试在组件的主页中列出我的帖子。在这里，我试图将它们放入 html 元素标签中并尝试将它们映射到那里。但它不起作用。任何想法为什么会发生这种情况？

标签： reactjsreduxreact-redux

Answer 1

您将需要一个用于映射 div 的包装元素。

return (
   <>
      {posts.map(({_id, text, title}) => (
         ...
      )}
   </>
);