如何在 React 中创建使用 state 和 props 的可重用函数

如何解决如何在 React 中创建使用 state 和 props 的可重用函数

我有一个函数可以将数据发送到服务器并使用 props 和 set...。它在几个组件中都是相同的。当某个事件发生时它会被调用。

如何将其从这些组件中重构到一个地方？

我曾考虑使用钩子，但因为它是由事件触发的，所以我认为使用钩子不是一个好方法。

async function sendDataToServer(data) {
    const url = new URL(buildUrl());
    let timeout = setTimeout(() => setPostingState(SendingState.Sending),250);
    try {
        const response = props.id
            ? await axios.put(url,data)
            : await axios.post(url,data);
        setPostingState(SendingState.Idle);
        props.onSaved(props.id ? props.id : response.data,data);
    }
    catch (error) {
        setPostingState(SendingState.Error);
    }
    clearTimeout(timeout);
}

function handleSubmit(e) { ... sendDataToServer(data); ... }

解决方法

你可以做一个咖喱函数：

// helpers.js
export const genSendDataToServerCallback = ({ setState,onSaved,id }) => async (
  data
) => {
  const url = new URL(buildUrl());
  let timeout = setTimeout(() => setState(SendingState.Sending),250);
  try {
    const response = await (props.id
      ? axios.put(url,data)
      : axios.post(url,data));
    setState(SendingState.Idle);
    onSaved(id ? id : response.data,data);
  } catch (error) {
    setState(SendingState.Error);
  }
  clearTimeout(timeout);
};


// Usage in some component
import { genSendDataToServerCallback } from './helpers.js'

const sendDataToServer = genSendDataToServerCallback({setter:setPostingState,...props});
function handleSubmit(e) { sendDataToServer(data); }

// Usage in other component with different setter
const sendDataToServer = genSendDataToServerCallback({setter:setState,...props});
function handleSubmit(e) { sendDataToServer(data); }