Как получить асин c данные из компонентов высшего порядка в React

Question

Как я могу сделать вызов API (возможно, asyn c), чтобы получить данные, чтобы иметь возможность использовать их дальше. Класс ничего не отображает сам по себе.

Я новичок в функциональных компонентах и ​​пытаюсь - извлечь данные в AppForm и - отправить их в качестве аргумента fun2 ( ) .

Любые предложения с благодарностью. Фрагменты кода будут еще более полезными. Заранее спасибо.

const AppForm = ({ x, y, z, id, ...props }) => (

  <InnerForm
    input={x ? fun1(x) : fun2()}
    isEqual={(a, b) => (a && a.id) === (b && b.id)}
  >

    {val => (
      <MainForm
        x={x}
        y={y}
        z={z}
        initialValues={val}
        {...props}
      />
    )}
  </InnerForm>
);
AppForm.propTypes = {
x: PropTypes.object,
y: PropTypes.object,
z: PropTypes.object,
}

Answer 1

С помощью useEffect мои обработчики реакции вы можете выполнить вызов API и установить данные в состояние с помощью обработчика useState. После получения данных вы можете отобразить компонент, передав необходимые значения

const AppForm = ({ x, y, z, id, ...props }) => {
    const [data, setData] = useState(null);

    useEffect(() => {
        axios.get('path').then((res) => setData(res));
    }, []);

    if(!data) return <Loading />
    return (
      <InnerForm
        input={x ? fun1(x) : fun2(data)}
        isEqual={(a, b) => (a && a.id) === (b && b.id)}
      >

        {val => (
          <MainForm
            x={x}
            y={y}
            z={z}
            initialValues={val}
            {...props}
          />
        )}
      </InnerForm>
    )

};