javascript - 如何在 React 中创建使用状态和道具的可重用函数

Question

我有一个将数据发送到服务器并使用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); ... }

标签： javascriptreactjsrefactoringreact-propsreact-state

Answer 1

您可以制作一个咖喱函数：

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