如何在 div 中显示 fetch 中的所有数组对象？

Question

如何以正确的方式保存我的对象数组？ 然后在 html 中显示它们？ 控制台日志可以打印整个阵列，但在 html 中的工作方式不同

import React from "react";
import "./style.css";
class App extends React.Component {
  constructor() {
    super();
    this.state = {
      quotes: [],
    };
  }

  componentDidMount() {
    fetch("https://type.fit/api/quotes")
      .then((response) => response.json())
      .then((data) => this.setState({ quotes: data }));
  }

  render() {
    console.log(this.state.quotes.text);
    return (
      <div>
        <h1>{this.state.quotes[0].author}</h1>
      </div>
    );
  }
}

export default App;

Answer 1

您可以通过 JSX 中的引号 map。

return (
   <div>
     {this.state.quotes && this.state.quotes.map(quote => (
       <div>
         <h1>{quote.author}</h1>
         <p>{quote.content}</p>
       </div>
     ))}
   </div>
 );

告诉我我是否误解了什么或是否有帮助:)

Answer 2

做这个：

const quotes = this.state.quotes.map((quote) => {
      return (
          <div>
              <h1>{quote.author}</h1>
          </div>
      );
    });

然后在你的主要组件的返回中使用这个引号，如下所示：

return(
    <div>{quotes}</div>
)

Answer 3

你可以这样使用：

import React from "react";
import "./style.css";
class App extends React.Component {
  constructor() {
 super();
 this.state = {
   quotes : []
 };
}

  componentDidMount() {
  fetch("https://type.fit/api/quotes")
   .then((response) => response.json())
   .then((data) => this.setState({ quotes: data }))
}

 render() {
 console.log(this.state.quotes.text)
 return (
  
   <div>
     {this.state.quotes ?
      {this.state.quotes.map(quotes.author=> (
        <h1>{author}</h1>
      ))}
     :
     <h1>{"Not loaded"}</h1>
     }
   </div>
 );
 }
 }

Answer 4

使用Array.prototype.map生成 jsx 元素。 在渲染方法中：

render() {
    retrun(
    {this.state.quotes.map(quote => (
         <div>
              <h2>{qutoe.author}<h2>
         </div>
    ))}
   )
}