Возврат ошибки (и я не могу понять, почему - PullRequest
Новая
       9

Возврат ошибки (и я не могу понять, почему

0 голосов
/ 03 марта 2020 
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 }
  );
 }

Я преобразовал функциональный компонент в компонент класса, чтобы я мог манипулировать состоянием, чтобы изменить цвет любимой кнопки - (я не могу использовать хуки или редукции для функции кнопки) Может кто-нибудь сказать мне, что я делаю неправильно

Ответы [ 3 ]

1 голос
/ 03 марта 2020

Вам необходимо завершить троичный оператор, добавив :

 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>))
0 голосов
/ 03 марта 2020

Это был окончательный код, и он работает, 

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);
0 голосов
/ 03 марта 2020

Как сказал Jaromanda X, {this.props.storyBriefs} недействителен. вам нужно предоставить пару ключ-значение, если переменная не имеет точечной нотации, тогда вы можете определить объект следующим образом:

...