重构React类到钩子-实体更新组件

问题描述

我有这个React组件，用于更新业务实体。它基本上是通过componentDidMount上的ID获取的，并在提交表单时发送放置请求。我想将其重构为基于钩子的组件。

这是之前的代码

import React from "react";
import axios from "axios";

//Api Helper Methods
const API_HOST = "https://api.example.com";
const get = (endPoint) =>
  axios
    .get(`${API_HOST}/${endPoint}`)
    .then((response) => response.data);

export const put = (endPoint,payload,id) =>
  axios
    .put(`${API_HOST}/${endPoint}/${id}`,payload)
    .then((response) => response.data);

//React route (uses React Router)
const END_POINT = `users`;

class Entity extends React.Component {

  state = { entity: {},fetching: true };

  getEntity = async () => {
    const { id } = this.props.match.params;
    this.setState({ fetching: true });
    const entity = await get(`${END_POINT}/${id}`);
    this.setState({ entity,fetching: false });
  };

  onChange = (key,value) =>
    this.setState({ entity: { ...this.state.entity,[key]: value } });

  componentDidMount() {
    this.getEntity();
  }

  onSubmit = async (e) => {
    e.preventDefault();
    let { entity } = this.state;
    let { match } = this.props;
    await put(END_POINT,entity,match.params.id);
  };

  render() {
    const { entity,fetching } = this.state;

    if (fetching) {
      return <p>loading...</p>;
    }

    return (
      <form onSubmit={this.onSubmit}>
        <label htmlFor="name">name</label>
        <input
          value={entity["name"]}
          onChange={(e) => this.onChange("name",e.target.value)}
        />
        <button type="submit">submit</button>
      </form>
    );
  }
}

export default Entity;

这是我到目前为止所需要的代码。下一步是提取自定义钩子。

const END_POINT = `users`;

export default function Entity({ match }) {
  const [entity,setEntity] = useState({ name: "" });
  const [fetching,setFetching] = useState( true );
  const { id } = match.params;

  const onChange = (key,value) => setEntity({ ...entity,[key]: value });

  useEffect(() => {
    const fetchEntity = async () => {
      const entity = await get(`${END_POINT}/${id}`);
      setEntity(entity);
      setFetching(false);
    };
    fetchEntity();
  },[id]);

  const onSubmit = async (e) => {
    e.preventDefault();
    await put(END_POINT,id);
  };

  if (fetching) {
    return <p>loading...</p>;
  }

  return (
    <form onSubmit={onSubmit}>
      <label htmlFor="name">name</label>
      <input
        value={entity["name"]}
        onChange={(e) => onChange("name",e.target.value)}
      />
      <button type="submit">submit</button>
    </form>
  );
}

解决方法

我还没有测试过，但这应该与您想要的通过实体函数的自定义钩子接近。

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

const API_HOST = "https://api.example.com";
const END_POINT = `users`;

function useEntity(entityID) {
    const [entity,setEntity] = useState({})
    
    
    useEffect(() => {
        (async () => {
            await fetch(`${API_HOST}/${END_POINT}/${props.match.params}`)
                .then(async res => await res.json())
                .then(result => setEntity(result));
        })();
    },[])

    return entity
}

export default function Entity(props) {
    const { id } = props.match;
    const entity = useEntity(id);
    const onSubmit = async () => await fetch(`${API_HOST}/${END_POINT}/${id}`,{method: 'PUT',body: entity})

    if (!entity) {
        return <p>loading...</p>;
    }

    return (
        <form onSubmit={onSubmit}>
            <label htmlFor="name">name</label>
            <input
            value={entity["name"]}
            onChange={(e) => setEntity({ ...entity,name: e.target.value})}
            />
            <button type="submit">submit</button>
        </form>
    )
}

,

感谢Harben的帮助，我让它像这样工作。

zoomstart