Блог

Я пытаюсь создать пользовательский крюк React, в котором он получает URL-адрес в качестве параметра для извлечения данных с помощью axios. Я могу получить нужные мне данные с помощью этого:

 import axios from 'axios'; import { useEffect, useState } from 'react';  //Takes a url parameter const useList = (url) =gt; {   const [data, setData] = useState( [] );    //Gets data from url parameter passed in and sets the data in State.  useEffect(() =gt; {  axios.get(url).then(data =gt; {  setData(data.data.content);  console.log(data);    })  }, [url]);   return {data}; }  export default useList;  

Я хотел бы добавить еще одно состояние:

 const [pageNumber, setPageNumber] = useState(0);  

а затем обновите это состояние в том же крючке useEffect, так как в ответе, который я получаю с URL-адреса, есть данные о разбиении на страницы, показывающие общее количество страниц.

Я добавил его в крючок useEffect вот так:

 useEffect(() =gt; {  axios.get(url).then(data =gt; {  setData(data.data.content);  setPageNumber(pageNumber.data.totalPages);  })  }, [url]);  

И получите ошибку:

Как я могу обновить несколько состояний в одном крючке useEffect? (Довольно новая реакция)

Номер страницы инициализируется числом, поэтому вы не можете выполнить PageNumber.data, вам следует выполнить следующее:

 useEffect(() =gt; {  axios.get(url).then(data =gt; {  setData(data.data.content);  setPageNumber(data.totalPages);  })  }, [url]); 

 lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"gt;lt;/scriptgt; lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"gt;lt;/scriptgt; 

В зависимости от дизайна api его setPageNumber(data.TotalPages) или setPageNumber(data.data.TotalPages)