Ошибка: 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 });