Я использую Context API для извлечения данных, а затем передаю данные в функцию getServerSideProps, но у меня возникает следующая ошибка:
React Hook "useContext" is called in function "getServerSideProps" that is neither a React function component nor a custom React Hook function
Вот мой код:
AppContext.tsx:
export const AppContext = createContext(null);
export const AppContextProvider = ({ children }) => {
const [data, setData] = useState([]);
useEffect(() => {
const fetchData = async () => {
const response = await fetch('http://localhost:8080/api/users');
const body = await response.json();
setData(body.users);
};
fetchData();
}, []);
return (
<AppContext.Provider value = {data}>{children}</AppContext.Provider>
);
};
Затем в моем файле index.tsx (путь: apps/ui/pages/index.tsx) У меня есть этот код:
const Home: NextPage<HomeProps> = ({ tiers }) => {
const data = useAppContext();
console.info('data', data); // This prints the data just fine
return (
<Box>
<Head>
<title>React App</title>
</Head>
{data?.map((user) => (
.....
/>
))}
</Box>
);
};
export async function getServerSideProps() {
// const data = useContext(AppContext); // Here I get the error message I mentioned above
return {
props: {
data,
},
};
}
export default Home;
Итак, как я могу получать данные, поступающие из моего файла контекста, внутри моей функции getServerSideProps и НЕ использовать контекст прямо в моем домашнем компоненте?
ПРИМЕЧАНИЕ. У меня есть частичное исправление, НО я не хочу делать это в файле index.tsx, потому что я хочу, чтобы данные поступали из моего контекста.
Вот мое частичное исправление, в index.tsx у меня есть эта функция:
const fetchData = async () => {
const response = await fetch('http://localhost:8080/api/users');
const body = await response.json();
return body.users;
};
и внутри функции getServerSideProps у меня есть это:
export async function getServerSideProps() {
const data = await fetchData();
return {
props: {
data,
},
};
}
и внутри компонента Home я просто передаю его как опору следующим образом:
const Home: NextPage<HomeProps> = ({ data }) => (..)
Да, я знаю, что getServerSideProps не является реагирующим компонентом, также у меня нет прямого доступа к NextPage, так как это контролируется NextJS.
Извините, кажется, я имел в виду Home
@evolutionxbox хорошо, я внутри компонента Home, так что вы можете предложить решение? Спасибо
getServerSideProps
работает исключительно на сервере и не является изоморфным. Он не имеет доступа к DOM и не является каким-либо компонентом React, поэтому вы можете использовать там хук. Вам придется вручную получить данные.
@code, не могли бы вы предоставить и опубликовать решение, пожалуйста? Спасибо
Боюсь, то, что вы пытаетесь сделать, невозможно. Если я правильно интерпретирую ваш вопрос, вы пытаетесь получить доступ к данным клиента на сервере, что невозможно сделать, если клиент явно не передаст их серверу.
@code Я пытаюсь получить данные из контекста, который вызывает и API, а затем каким-то образом передать эти данные в getServerSideProps, чтобы эта функция могла передать их в компонент Home
То, что говорит @code, верно, у вас есть контекст, который извлекает данные на стороне клиента, и вы хотите использовать эти данные в getServerSideProps. Вы пытаетесь волшебным образом передать клиентские данные на сервер без запроса. Проблема здесь в том, что вы неправильно интерпретируете поток данных с помощью getServerSideProps.
С помощью getServerSideProps вы генерируете некоторые данные (реквизиты) на сервере, а затем передаете их на страницу, чтобы реакция могла отображаться на сервере.
getServerSideProps запускается только тогда, когда вы запрашиваете страницу (запрос GET), и он запускается до любого кода реакции, поэтому вы не можете получить доступ к своим данным контекста.
Частичное решение у вас правильное, но вместо вызова выборки импортируйте логику из этого маршрута /api/users
внутри getServerSideProps. Это избавит вас от дублирующих вызовов на ваш сервер.
getServerSideProps
не является реагирующим компонентом, поэтому вы не можете использоватьuseContext
. Попробуйте положить его внутрьNextPage
?