JavaScript объектная функция в классе реагирующих компонентов - PullRequest
0 голосов
/ 07 сентября 2018

Я получил объектную функцию, используя компонент реагировать, ниже приведен мой код, я попытался создать объектную функцию внутри объекта articleActions, но не получил синтаксическую ошибку. Импорт API работает нормально, и я получаю правильные данные и сохраняю в этом состоянии компонента: this.state.articles, this.state.authors.

App.js
import React from "react";
import DataApi from "../DataApi";
import data from "../testData";
import ArticleList from "./ArticleList";

const api = new DataApi(data.data);

class App extends React.Component {
    constructor() {
    super();
     this.state = {
       articles: api.getArticles(),
       authors: api.getAuthors()
      };
    }
    articleActions = {
       lookupAuthor: authorId => this.state.authors[authorId]
    };
    render() {
      return (
       <ArticleList
         articles={this.state.articles}
         articleActions={this.articleActions}
       />
   );
}
}

export default App;

второй файл: ArticleList.js

import React from "react";

import Article from "./Article";

 const ArticleList = props => {
      return (
        <div>
          {Object.values(props.articles).map(article => (
             <Article
               key={article.id}
               article={article}
               actions={props.articleActions}
             />
          ))}
        </div>
       );
      };

 export default ArticleList;

третий файл: Article.js

import React from "react";

 const Article = props => {
    const { article, actions } = props;
    const author = actions.lookupAuthor(article.authorId);
    return (
      <div>
      <div>{article.title}</div>
      <div>{article.date}</div>
      <div>
          <a href={author.website}>
              {author.firstName} {author.lastName}
          </a>
      </div>
      <div>{article.body}</div>
    </div>
   );
 };

 export default Article;

Сообщение об ошибке:

SyntaxError: C:/Users/coral/Documents/react-advanced/lib/components/App.js: 
  Unexpected token (16:17)
  14 |     };
  15 |   }
> 16 |   articleActions = {
     |                  ^
  17 |     lookupAuthor: authorId => this.state.authors[authorId]
  18 |   };

lookupAuthor должен быть функцией с параметром: authorId и получать возвращаемое значение объекта author. this.state.authors - это массив объектов автора. Каждый объект с ключом authorId в качестве ключа и объектом author в качестве значения. Я не уверен, в чем здесь ошибка при объявлении функции внутри объекта js. Надеюсь, что кто-то может помочь

1 Ответ

0 голосов
/ 07 сентября 2018

Это должен быть метод:

articleActions = () => ({
  lookupAuthor: authorId => this.state.authors[authorId]
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...