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

我是React的新手，我不知道我的代码出了什么问题。我正在制作一个React Axios项目，字符数据显示另一个API链接，所以我制作了一个Axios循环来显示字符名称。字符名称可以显示在控制台中，因此应该是成功的，但名称没有显示在屏幕上。已返回数据，但仍不显示。我不知道出了什么问题，请帮帮我。这是web应用程序图片，这是完整的代码。谢谢

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;

import React，{Component}来自“React”；
从“axios”导入axios；
类MovieDetail扩展组件{
状态={
showMovieDetail:false，
};
movieListClicked=（）=>{
this.setState（{showMovieDetail:！this.state.showMovieDetail}）；
};
getCharactersDetails=（）=>{
const charsAPILink=this.props.characters；
const charData=返回charsAPILink.map（（数据）=>{
获取（数据）。然后（（响应）=>{
console.log（response.data.name）；
返回response.data.name；
});
});
返回字符数据；
};
render（）{
返回(
{！这个.州.放映电影详情(
{this.props.title}
) : (
标题：{this.props.Title}

插曲：{this.props.插曲}

{this.props.opening}

导演：{this.props.Director}

制作人：{this.props.Producer}

日期：{this.props.Date}

字符：{this.getCharactersDetails（）}
)}
);
}
}
导出默认电影细节；

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

getCharactersDetails=async（）=>{ const charsAPILink=this.props.characters

const charData = await getChars(charsAPILink )
return charData 

})

异步函数getChars（charsAPILink）{ 设allChars=[]； for（设i=0；i{ allChars.push（response.data.title）； }); } 返回所有字符； }

---

您试图在render函数中写入异步数据，因此它不会显示

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

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;

import React，{Component}来自“React”；
从“axios”导入axios；
类MovieDetail扩展组件{
状态={
showMovieDetail:false，
charData:[]
};
movieListClicked=（）=>{
this.setState（{showMovieDetail:！this.state.showMovieDetail}）；
};
componentDidMount（）{
this.getCharactersDetails（）
}
getCharactersDetails=（）=>{
const charsAPILink=this.props.characters；
常数温度=[]
charsAPILink.map（（数据）=>{
温度推送（axios.get（数据））
});
承诺。全部（临时）
。然后（res=>res）
.then（responses=>promise.all（responses.map（r=>r.json（）））
.then（data=>this.setState（{charData:data}））
};
render（）{
返回(
{！这个.州.放映电影详情(
{this.props.title}
) : (
标题：{this.props.Title}

插曲：{this.props.插曲}

{this.props.opening}

导演：{this.props.Director}

制作人：{this.props.Producer}

日期：{this.props.Date}

字符：{charData.map（项=>{
返回（{item.name}）
}}
)}
);
}
}
导出默认电影细节；

Hi感谢您的回复，尝试了您的方法，但现在屏幕上没有显示任何内容，显示了此错误，但控制台中仍显示了名称thohi感谢您的回复，但承诺部分的代码有一点错误我不知道如何修复它try now，我已经更新了代码抱歉回复太晚，似乎还有2个错误这里出错

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;