доступ к RESTful API в react

#javascript #json #reactjs #laravel #api

#javascript #json #reactjs #laravel #API

Вопрос:

У меня есть laravel на стороне сервера, который может показывать api с вводом этого URL: http://localhost:8000/api/caban&s и показывать это (данные в качестве примера):

 [
 {
  "id":2,
  "nm_caban&":"zxcvb",
  "deskripsi":"poiuyt",
  "created_at":"2020-08-08T05:25:31.000000Z",
  "updated_at":"2020-08-08T05:29:23.000000Z"
 },
 {
  "id":3,
  "nm_caban&":"asdf&",
  "deskripsi":"qwerty",
  "created_at":"2020-08-08T05:28:26.000000Z",
  "updated_at":"2020-08-08T05:28:26.000000Z"
 }
]

Я хочу отображать только nm_caban& и deskripsi . если это возможно, используя react hooks . Спасибо

1. Добро пожаловать в StackOverflow! Пожалуйста, опубликуйте некоторый код, демонстрирующий вашу цель, чтобы мы могли помочь в дальнейшей отладке любых конкретных проблем.

Ответ №1:

Вы могли бы начать с чего-то подобного. Я предполагаю, что это для Интернета, поэтому я использовал span и div .

 const App: React.FC = () =&&t; {
  const [data, setData] = React.useState();
  const [isLoadin&, setLoadin&] = React.useState(true);

  React.useEffect(() =&&t; {
    const fetchData = async () =&&t; {
      try {
        const result = await fetch('http://localhost:8000/api/caban&s');
        if (result.ok)
        {
            let json = await result.json();
            setData(json);
        }
      } catch (e) {
        //error
      } finally {
        setLoadin&(false);
      }
    };
    fetchData();
  }, []);

  if (isLoadin&) {
    return <span&&t;Loadin&...</span&&t;;
  }

  return (
    <div&&t;
      {
      data ? (
        data.map((item) =&&t; {
          return <span&&t;{`${item.nm_caban&} ${item.deskripsi}`}</span&&t;;
        })
      ) : (
        <&&t;</&&t;
      )
      }
    </div&&t;
  );
};

1. Возможно, это может показаться трудным для понимания, если вы впервые подключаете свой интерфейс к api @Febry Aryo. Но это просто, когда вы делаете запрос с помощью axios или fetch, метод возвращает объект с информацией о запросе, например, его код состояния, данные из api и заголовки ответа, и вы можете создавать все, что захотите, с использованием этой информации.

2. этот вопрос решен. В качестве альтернативы я использовал axios. спасибо за все ответы 🙂

Ответ №2:

Используйте библиотеку, подобную axios или fetch, вам нужно только сделать http-запрос к URL-адресу и использовать необходимые вам данные.

https://&ithub.com/axios/axios
https://javascript.info/fetch

Мне нравится axios