通过 Strapi 数据映射在 React 中不起作用

Question

我在 strapi 上关注 documentation 并作出反应，但我收到此控制台错误：

this.state.restaurants.map 不是函数

如果我用控制台记录数据，它会给我这个响应

但是尝试在前端显示它们不起作用

这是用Fetch方法

import React from "react";

class App extends React.Component {
  state = {
    restaurants: [],
    error: null,
  };

  componentDidMount = async () => {
    const parseJSON = (resp) => (resp.json ? resp.json() : resp);

    const checkStatus = (resp) => {
      if (resp.status >= 200 && resp.status < 300) {
        return resp;
      }
      return parseJSON(resp).then((resp) => {
        throw resp;
      });
    };
    const headers = {
      "Content-Type": "application/json",
    };

    try {
      const restaurants = await fetch("http://localhost:1337/api/restaurants", {
        method: "GET",
        headers: headers,
      })
        .then(checkStatus)
        .then(parseJSON);
      this.setState({ restaurants });
    } catch (error) {
      this.setState({ error });
    }
  };

  render() {
    const { error, restaurant } = this.state;
    if (error) {
      return <div>An error occured: {error.message}</div>;
    }

    return (
      <div className="App">
        <ul>
          {this.state.restaurants.map((restaurant) => (
            <li key={restaurant.id}>{restaurant.name}</li>
          ))}
        </ul>
      </div>
    );
  }
}

export default App;

这是axios方法

import React from 'react';
import axios from 'axios';

class App extends React.Component {
  // State of your application
  state = {
    restaurants: [],
    error: null,
  };

  // Fetch your restaurants immediately after the component is mounted
  componentDidMount = async () => {
    try {
      const response = await axios.get('http://localhost:1337/api/restaurants');
      this.setState({ restaurants: response.data });
    } catch (error) {
      this.setState({ error });
    }
  };

  render() {
    const { error, restaurant } = this.state;

    // Print errors if any
    if (error) {
      return <div>An error occured: {error.message}</div>;
    }

    return (
      <div className="App">
        <ul>
          {this.state.restaurants.map(restaurant => (
            <li key={restaurant.id}>{restaurant.name}</li>
          ))}
        </ul>
      </div>
    );
  }
}

export default App;

我在 Public 上的 strapi 角色有勾选标记 find 和 findOne 与这个 documentation.

上的一样

响应的控制台日志

Answer 1

您从 response.data 获得餐馆，但响应有一个对象 data: { data: ... }.

解决方案：

this.setState({ restaurants: response.data.data });

通过 Strapi 数据映射在 React 中不起作用

Mapping through Strapi data doesnt work in React

reactjs

strapi