Как использовать getInitialProps в компоненте React - PullRequest
Новая
       43

Как использовать getInitialProps в компоненте React

0 голосов
/ 11 ноября 2019

Я впервые работаю с React и Next.js, так что я не очень опытен, но я пытаюсь помочь с проектом, который использует обе эти вещи. Мне нужно получить массив художников с конечной точки и использовать его в ProjectForm. Функция getInitialProps используется для этого в другом месте проекта, поэтому я пытаюсь последовать этому примеру, но не знаю, как передать эти данные в ProjectForm. Я пробовал что-то вроде const ProjectForm = (props: ProjectFormProps, artists) и добавлял artists: artists к ProjectFormProps, но без кубиков. Как я могу использовать artists данные, которые я получаю от функции getInitialProps в ProjectForm? Любая помощь будет высоко ценится! 

import React, { useState, useEffect, useReducer } from 'react';
import axios from 'axios';

interface ProjectFormProps {
  entity: any;
  user: any;
  projectTypes?: any;
  handleButtonClick?: any;
  isNew?: boolean,
  onSubmitForm?: Function,
  onChange?: Function,
};

const ProjectForm = (props: ProjectFormProps) => {

  console.log(artists);

  return (
    <h1>Artists</h1>
  );
}

ProjectForm.getInitialProps = async ({ req }) => {
  const baseUrl = req ? `${req.protocol}://${req.get('Host')}` : '';
  const artists = await axios.get(`${baseUrl}/api/artists`)
    .then(res => res.data)
    .catch(err => console.error(err, 'Unable to retrieve artists from API.'));
  return {
    artists
  };
};

export default ProjectForm;

1 Ответ

0 голосов
/ 11 ноября 2019

Можете ли вы попробовать это: 

interface ProjectFormProps {
  entity: any;
  user: any;
  projectTypes?: any;
  handleButtonClick?: any;
  isNew?: boolean,
  onSubmitForm?: Function,
  onChange?: Function,
  artists?: any
};


const ProjectForm = (props: ProjectFormProps) => {
  console.log(props.artists);

  return (
     <h1>Artists</h1>
  );
}
...