如何在 React 组件中使用 getInitialProps

Question

这是我第一次使用 React 和 Next.js，所以我不是很有经验，但我正在尝试帮助一个使用这两种东西的项目。我需要从端点获取一组艺术家并在ProjectForm 中使用它。 getInitialProps 函数用于在项目的其他地方执行此操作，因此我尝试效仿，但不确定如何将此数据传递给 ProjectForm。我尝试过类似const ProjectForm = (props: ProjectFormProps, artists) 并将artists: artists 添加到ProjectFormProps，但没有骰子。如何使用从ProjectForm 中的getInitialProps 函数获得的artists 数据？任何帮助将不胜感激！

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;

Answer 1

你能试试这个吗：

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>
  );
}