Я получил объектную функцию, используя компонент реагировать, ниже приведен мой код, я попытался создать объектную функцию внутри объекта 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. Надеюсь, что кто-то может помочь