React.js axios 数据显示在控制台但未显示在屏幕上（尚未回答）

Question

我是 React 的新手，我不知道我的代码出了什么问题。我正在使用https://swapi.dev/api/films/ 制作一个 React Axios 项目，字符数据显示另一个 API 链接，因此我制作了一个 Axios 循环来显示字符名称。字符名称可以显示在控制台中，所以应该成功但名称没有显示在屏幕上。已返回数据但仍未显示。我不知道出了什么问题，请帮助我。这是网络应用图片https://imgur.com/a/jQkuUI3，这是完整代码。谢谢！！

import React, { Component } from "react";
import axios from "axios";


class MovieDetail extends Component {
  state = {
    showMovieDetail: false,
  };

  movieListClicked = () => {
    this.setState({ showMovieDetail: !this.state.showMovieDetail });
  };

  getCharactersDetails = () => {
    const charsAPILink = this.props.characters;

    const charData = return charsAPILink.map((data) => {
      axios.get(data).then((response) => {
        console.log(response.data.name);
        return response.data.name;
      });
    });

    return charData;

  };

  render() {
    return (
      <div className="MovieDetail" onClick={this.movieListClicked}>
        {!this.state.showMovieDetail ? (
          <h2>{this.props.title}</h2>
        ) : (
          <div>
            <h3>
              Title : {this.props.title} <br />
              Episode : {this.props.episode} <br />
              {this.props.opening} <br />
              Director : {this.props.director} <br />
              Producer : {this.props.producer} <br />
              Date : {this.props.date} <br />
              Characters : {this.getCharactersDetails()}
            </h3>
          </div>
        )}
      </div>
    );
  }
}

export default MovieDetail;

Answer 1

您正在尝试在渲染函数中写入异步数据，因此它不会显示。

您可以在状态中保存数据并更新状态。

import React, { Component } from "react";
import axios from "axios";


class MovieDetail extends Component {
  state = {
    showMovieDetail: false,
    charData: []
  };

  movieListClicked = () => {
    this.setState({ showMovieDetail: !this.state.showMovieDetail });
  };

 componentDidMount() {
   this.getCharactersDetails()
}

  getCharactersDetails = () => {
    const charsAPILink = this.props.characters;
    const temp = []
    
    charsAPILink.map((data) => {
      temp.push(axios.get(data))
    });
    
  promise.all(temp)
   .then(res => res)
    .then(responses => promise.all(responses.map(r => r.json()))
      .then(data => this.setState({charData: data}))
  };

  render() {
    return (
      <div className="MovieDetail" onClick={this.movieListClicked}>
        {!this.state.showMovieDetail ? (
          <h2>{this.props.title}</h2>
        ) : (
          <div>
            <h3>
              Title : {this.props.title} <br />
              Episode : {this.props.episode} <br />
              {this.props.opening} <br />
              Director : {this.props.director} <br />
              Producer : {this.props.producer} <br />
              Date : {this.props.date} <br />
              Characters : {charData.map(item => {
                 return (<span> { item.name } </span>)
              }}
            </h3>
          </div>
        )}
      </div>
    );
  }
}

export default MovieDetail;

Answer 2

您没有将 axios 响应返回给 map 函数，最好使用 async await 等到 api 响应然后返回。试试这个：-

getCharactersDetails = async () => { const charsAPILink = this.props.characters;

const charData = await getChars(charsAPILink )
return charData 

};

async function getChars(charsAPILink) {
  let allChars = [];
  for (let i = 0; i < charsAPILink.length; i++) {
    await axios.get(charsAPILink[i]).then((response) => {
      allChars.push(response.data.title);
    });
  }
  return allChars;
}