React函数组件添加Patch请求实现Toggle状态同步至UI与数据库

首先明确：不是必须用useState。你的组件当前是受控组件——状态由父组件通过value传入，状态更新通过onChange通知父组件。这种模式下组件本身不需要维护内部状态，完全可以基于父组件传递的状态完成需求。

一、受控组件模式（推荐，符合当前组件设计） #

你的组件依赖父组件的value和onChange，正确的执行流程应该是：

1. 触发切换时，先计算新状态，调用onChange更新父组件状态（同步UI）
2. 发送Patch请求到后端更新数据库
3. 处理请求失败的情况：如果请求失败，调用onChange回滚UI状态，避免UI与数据库状态不一致

修正后的代码：

import PropTypes from 'prop-types';

const ToggleStats = ({ label, value, onChange }) => {
  const toggled = !!value;

  const handleToggle = () => {
    const newToggledState = !toggled;
    // 先通知父组件更新UI
    onChange(newToggledState);

    // 发送Patch请求，替换body为接口实际要求的字段（比如visible/invisible）
    api.patch(`admin/admin/institutions/id/?with_deleted=true`, { 
      body: { visible: newToggledState }
    })
    .then(res => res.json())
    .catch(err => {
      // 请求失败，回滚UI状态
      console.error('更新状态失败:', err);
      onChange(toggled);
    });
  };

  return (
    <Toggle
      label={label}
      labelPosition='left'
      labelStyle={styles.label}
      iconStyle={styles.ripple}
      thumbSwitchedStyle={styles.toggle}
      trackSwitchedStyle={styles.toggleBackround}
      onToggle={handleToggle}
      value={toggled} // 受控组件需将状态绑定到Toggle，确保UI与状态一致
    />
  );
};

ToggleStats.propTypes = {
  label: PropTypes.string.isRequired,
  value: PropTypes.any,
  onChange: PropTypes.func.isRequired
};

二、使用useState的非受控组件模式 #

如果想让组件独立维护状态，不需要依赖父组件的value和onChange，可以用useState实现：

import PropTypes from 'prop-types';
import { useState } from 'react';

const ToggleStats = ({ label }) => {
  // 组件内部维护状态，初始值可从接口获取或设默认值
  const [toggled, setToggled] = useState(false);

  const handleToggle = () => {
    const newToggledState = !toggled;
    // 先更新本地状态同步UI
    setToggled(newToggledState);

    // 发送Patch请求
    api.patch(`admin/admin/institutions/id/?with_deleted=true`, { 
      body: { visible: newToggledState }
    })
    .then(res => res.json())
    .catch(err => {
      console.error('更新状态失败:', err);
      // 请求失败回滚状态
      setToggled(toggled);
    });
  };

  return (
    <Toggle
      label={label}
      labelPosition='left'
      labelStyle={styles.label}
      iconStyle={styles.ripple}
      thumbSwitchedStyle={styles.toggle}
      trackSwitchedStyle={styles.toggleBackround}
      onToggle={handleToggle}
      value={toggled}
    />
  );
};

ToggleStats.propTypes = {
  label: PropTypes.string.isRequired
};

关键注意点 #

• 原代码中的this.setState是类组件写法，函数组件中不可使用，受控模式下用onChange、非受控模式下用setToggled即可
• 必须处理请求失败的场景，否则会出现UI显示与数据库实际状态不一致的问题
• 受控组件模式更适合需要父组件统一管理状态的场景，非受控组件适合组件独立使用的场景

内容的提问来源于stack exchange，提问作者Fighithebird