退货有错误（我不明白为什么答案

【问题标题】：There is an error on the return ( and I cannot understand why退货有错误（我不明白为什么
【发布时间】：2020-06-15 07:33:21
【问题描述】：

import { connect } from 'react-redux'
import { Link } from 'react-router-dom'

class MyStories extends React.Component {


  addFavorite = (e) => {
    this.setState({
      bgcolor: "blue"
    })
  }


  render () {
  const { stories }  = this.props;
    const { storyBriefs }  = this.props.stories.length > 0 ?

          stories.map(t => (<div className="menu-inner-container"><p key={t.id}><Link to={`/stories/${t.id}`}>{t.attributes.title}</Link>
           <div className="addFavoriteCss"
            style={{backgroundColor: this.state.bgColor}}
            onClick={this.addFavorite}> Favorite</div>
        </p></div>))

//refactor - create a button that will allow for us to mark which our favorites are

  return (
    { this.props.storyBriefs }
   );
  }

 }
const mapStateToProps = state => {
  return {
    stories: state.myStories
  }
 }


export default connect(mapStateToProps)(MyStories)

收到此错误

./src/components/MyStories.js 第 26 行：解析错误：意外的令牌，应为“：”

    return (
      ^
   { this.props.storyBriefs }
  );
 }

我将功能组件转换为类组件，以便我可以操纵状态以更改收藏按钮的颜色——（我不能对按钮功能使用钩子或 redux）谁能告诉我我是什么做错了吗？

【问题讨论】：

{ this.props.storyBriefs } 不是有效的对象语法 - 它甚至是有效的道具吗？也许你只想要return ( { storyBriefs } )
我刚刚收到了 {storyBriefs} 并遇到了同样的错误。所以我改回来了
好吧，使用return ( { storyBriefs: storyBriefs } ) - 也许你的环境不理解对象简写
但仍然出现同样的错误
即使是return ( { storyBriefs: storyBriefs } )?我怀疑这是相同的错误

标签： javascript reactjs button redux state

【解决方案1】：

正如 Jaromanda X 所说，{ this.props.storyBriefs } 无效。您需要提供键值对，除非变量没有点符号，然后您可以这样定义对象

【讨论】：

现在我阅读了您对 Jaromanda 的评论，也许是对象周围的括号引起了问题

【解决方案2】：

您需要通过添加:来完成三元运算符

 const storyBriefs  = this.props.stories.length > 0 ?

          stories.map(t => (<div className="menu-inner-container"><p key={t.id}><Link to={`/stories/${t.id}`}>{t.attributes.title}</Link>
           <div className="addFavoriteCss"
            style={{backgroundColor: this.state.bgColor}}
            onClick={this.addFavorite}> Favorite</div>
        </p></div>))

: [] // you need something here after the ':', an empty array could be useful in this case

 return storyBriefs

或者你可以把它缩短为

 return stories.map(t => (<div className="menu-inner-container"><p key={t.id}><Link to={`/stories/${t.id}`}>{t.attributes.title}</Link>
           <div className="addFavoriteCss"
            style={{backgroundColor: this.state.bgColor}}
            onClick={this.addFavorite}> Favorite</div>
        </p></div>))

【讨论】：

虽然这将解决 OPs 问题中的错误，但代码仍然无法工作，因为数组没有 storyBriefs 属性。此外，如果使用空数组确实是所需的结果，那么根本不需要使用条件运算符。他们可以只做const result = stories.map(...) 并得到相同的结果。映射一个空数组将返回一个空数组。
我确实有：`
))`之后的null`

【解决方案3】：

这是最终的代码，它可以工作，

import React from "react"
import { connect } from "react-redux"
import { Link } from "react-router-dom"

class MyStories extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      button: false
    };
    this.addFavorite = this.addFavorite.bind(this);
  }

  addFavorite = id => {
    this.setState({
      button: id
    });
  };

  render() {
    return this.props.stories.map(t => (
      <div className="menu-inner-container">
        <p key={t.id}>
          <Link to={`/stories/${t.id}`}>{t.attributes.title}</Link>
          <button
            key={t.id}
            className={this.state.button===t.id ? "buttonTrue" : "buttonFalse"}
            onClick={() => this.addFavorite(t.id)}
          >
            Favorites
          </button>
        </p>
      </div>
    ));
  }
}

//refactor - create a button that will allow for us to mark which our favorites are
const mapStateToProps = state => {
  return {
    stories: state.myStories
  };
};

export default connect(mapStateToProps)(MyStories);

【讨论】：