Question

我发出API请求并获得响应（新闻文章），我想从响应中呈现一些项目。例如（文章标题，文章描述等）

我将响应存储在状态中，默认状态为null。

我想有逻辑允许我在li标签中呈现这些项目，我理解通过.map函数执行此操作但我不确定在何处以及如何添加逻辑以获得我想要的结果。

我尝试过使用三元操作的一些事情，但我似乎无法在没有错误和/或错误放置的情况下实现它。

我会将这些项目渲染到ArticleSilo的ul中

这是我的组件，我尝试了一些逻辑。

＆＃13;

import React, { Component } from "react";

import classes from "./News.css";

import Axios from "axios";
import Aux from "../../hoc/Aux";

class News extends Component {
  state = {
    articles: null,
    tell: false
  };

  clickHandler = e => {
    Axios.get(
      "https://newsapi.org/v2/top-headlines?sources=" +
        e.target.getAttribute("source-link") +
        "&apiKey=e5da89b57ee347a1a1da306427dc5fa7"
    )
      .then(res => {
        this.setState({ articles: res.data.articles });
      })
      .catch(err => {
        console.log(err);
      });
  };

  render() {
    let articles = this.state.articles.map(aKey => {
      let title = aKey.title;
      let desc = aKey.description;
      <li>
        <p>Title: {title}</p>
        <p>Description: {desc}</p>
      </li>;
    });

    return (
      <Aux>
        <div className={classes.SidePanel}>
          <div className={classes.Heading}>News Sources</div>

          <ul className={classes.List}>
            <li onClick={this.clickHandler} source-link="polygon">
              Polygon
            </li>
            <li onClick={this.clickHandler} source-link="tech-rader">
              TechRadar
            </li>
            <li onClick={this.clickHandler} source-link="hacker-news">
              Hacker News
            </li>
            <li onClick={this.clickHandler} source-link="national-geographic">
              National Geographic
            </li>
            <li onClick={this.clickHandler} source-link="ars-technica">
              Ars Technica
            </li>
            <li onClick={this.clickHandler} source-link="breitbart-news">
              Breitbart News
            </li>
            <li onClick={this.clickHandler} source-link="crypto-coins-news">
              Crypto Coins News
            </li>
            <li onClick={this.clickHandler} source-link="the-verge">
              The Verge
            </li>
            <li onClick={this.clickHandler} source-link="the-next-web">
              The Next Web
            </li>
          </ul>
        </div>

        <div className={classes.ArticleSilo}>
          <ul>{articles}</ul>
        </div>
      </Aux>
    );
  }
}

export default News;

＆＃13;

Answer 1

render() {
  return (
   <Aux>
    <div className={classes.SidePanel}>
      <div className={classes.Heading}>News Sources</div>

      <ul className={classes.List}>
        <li onClick={this.clickHandler} source-link="polygon">
          Polygon
        </li>
        <li onClick={this.clickHandler} source-link="tech-rader">
          TechRadar
        </li>
        <li onClick={this.clickHandler} source-link="hacker-news">
          Hacker News
        </li>
        <li onClick={this.clickHandler} source-link="national-geographic">
          National Geographic
        </li>
        <li onClick={this.clickHandler} source-link="ars-technica">
          Ars Technica
        </li>
        <li onClick={this.clickHandler} source-link="breitbart-news">
          Breitbart News
        </li>
        <li onClick={this.clickHandler} source-link="crypto-coins-news">
          Crypto Coins News
        </li>
        <li onClick={this.clickHandler} source-link="the-verge">
          The Verge
        </li>
        <li onClick={this.clickHandler} source-link="the-next-web">
          The Next Web
        </li>
      </ul>
    </div>
    <div className={classes.ArticleSilo}>
      <ul>
        {this.state.articles.map(article => (        
          <li>
            <p>Title: {article.title}</p>
            <p>Description: {article.desc}</p>
          </li>
         )
        }
      </ul>
    </div>
    </Aux>
  );
}

有条件地从Reactjs组件中的API响应中呈现内容

1 个答案: