javascript - 错误 : this. state.joblistings.map 不是 ReactJS 中的函数

Question

我正在做项目，我从实时 API 获取一些数据。在控制台中，数据来自服务器，但是当我在 div 中设置此数据以显示给用户时，它给我错误提示 this.state.joblistings.map is not a function .你能帮我解决这个问题吗？我也会与您分享代码。

    class Index extends React.Component {
    constructor(props){
        super(props);
        this.state = {
          joblistings: [],
          initial:0

        }
      }
      async componentDidMount() {
        try {
          console.log("mounted")
          const response = await fetch(`...../api/joblistings/CTcG9kN8kGtsLvtbg`);
          const json = await response.json();
          console.log(json);
          this.setState({ joblistings: json });
        } catch (error) {
          console.log(error);
        }}

      homeView(e){
        e.preventDefault();
        this.setState({initial:1})
      }
  render() {
    if(this.state.initial === 1){
        return (<HomePage/>);
      }
    return (
      <div>
          <Header />
          <br/><br/>
          <h1>Hello from index</h1>
          {this.state.joblistings.map(item => <div key={item._id}>{item.job.contractType}</div>)}
        <Btn onClick={this.homeView}>
          Proceed
        </Btn>
      </div>
    );
            }
  }

Answer 1

当您发布您收到的回复时。那是一个对象，.map 不能迭代它。相反，您可以将此对象推送到所需的属性中:

const response = await fetch(`...../api/joblistings/CTcG9kN8kGtsLvtbg`);
const json = await response.json();
console.log(json);
let joblistings = [json];
this.setState({ joblistings });