Блог

Я пытаюсь вызвать компонент (авторов), который перебирает массив с помощью КАРТЫ, когда я нажимаю на компонент, но я продолжаю получать ошибки типа, может ли кто-нибудь увидеть, где я ошибаюсь.

список консолей

возвращенные данные

У меня есть четыре компонента

• paper.js
• papers.js
• authors.js
• author.js

компонент «Документы» извлекает список документов из моего API, а затем выводит на экран примерно так:

При нажатии на статью я хочу отобразить список авторов, и именно здесь я сталкиваюсь с ошибкой.

Paper.js

 import React from "react"; import Authors from "./author";   class Paper extends React.Component {  constructor(props) {  super(props)  this.state = {  display: false  }  }   handleClick = () =gt; {  this.setState({display:!this.state.display})  }   render() {  let details ="";  if (this.state.display){  details =   lt;divgt;    lt;pgt;{this.props.paper.abstract}lt;/pgt;  lt;Authors /gt;    lt;/divgt;  }   return (   lt;div onClick={this.handleClick}gt;  lt;pgt;{this.props.paper.title}lt;/pgt;  {details}  lt;/divgt;  );  } }   export default Paper;  

papers.js

 import React from 'react'; import Paper from './paper';  class Papers extends React.Component {  constructor(props){  super(props)  this.state = { results : [] } // declaring state  console.log("constructor");  }    componentDidMount() {  let url = "http://localhost/api/papers";   if (this.props.author_id !== undefined){  url  = "?authorid="   this.props.author_id;  }     fetch(url)  .then((response) =gt; {  if (response.status === 200) {  return response.json()   } else {  throw Error(response.statusText);  }    })  .then((data) =gt; {  this.setState({results:data})  })  .catch((err) =gt; {  console.log("something went wrong", err)  })  console.log("mounted")  }  render() {  console.log("render");  console.log(this.state.results);  return (    lt;divgt;  {this.state.results.map( (paper, i) =gt; (lt;Paper key={i} paper={paper}/gt;) )}  lt;/divgt;    )  } }   export default Papers;  

authors.js

 import React from "react"; import Papers from "./papers.js";   class Author extends React.Component {  constructor(props) {  super(props)  this.state = {  display: false  }  }   handleClick = () =gt; {  this.setState({display:!this.state.display})  }   render() {  let details = "";   if (this.state.display){  details =  lt;divgt;  lt;Papers author_id={this.props.author.author_id} /gt;  lt;/divgt;  }   return (   lt;div onClick={this.handleClick}gt;  lt;pgt;{this.props.author.first_name   ' '   this.props.author.last_name}lt;/pgt;  {details}  lt;/divgt;  );  } }   export default Author;   

authors.js

 import React from 'react'; import Author from './author';   class Authors extends React.Component {  constructor(props){  super(props)  this.state = { results : [] } // declaring state  console.log("constructor");  }    componentDidMount() {  let url = "http://localhost/api/authors";      fetch(url)  .then((response) =gt; {    if (response.status === 200) {  return response.json()   } else {  throw Error(response.statusText);  }  })  .then((data) =gt; {  this.setState({results:data})  })  .catch((err) =gt; {  console.log("something went wrong", err)  })  console.log("mounted")  }  render() {  console.log("render");  console.log(this.state.results);  return (    lt;divgt;  {this.state.results.map( (author, i) =gt; (lt;Author key={i} author={author}/gt;) )}  lt;/divgt;    )  } }   export default Authors;