React如何通过API配置列表设置Switch开关checked状态并实现切换功能

完整修正代码 #

import { useState, useEffect } from 'react'
// 假设Switch为你引入的第三方组件，比如Material UI的Switch
import { Switch } from '@mui/material'

const Settings = () => {
  // 修正原数组语法错误：对象属性用冒号赋值
  const allSettings = [
    {name:"Setting1", value: true}, 
    {name:"Setting2", value: true}, 
    {name:"Setting3", value: true},
    {name:"Setting4", value: false},
    {name:"Setting5", value: true}, 
    {name:"Setting6", value: true},
    {name:"Setting7", value: true}
  ]

  // 初始化state：把数组转成{ 设置项名: 开关状态 }的结构
  const [settings, setSettings] = useState(() => {
    return allSettings.reduce((acc, item) => {
      acc[item.name] = item.value
      return acc
    }, {})
  })

  // 如果allSettings是从API异步获取，替换上面的useState初始值，新增useEffect即可：
  // const [settings, setSettings] = useState({})
  // useEffect(() => {
  //   // 调用你的API接口拉取配置数据
  //   fetch('/api/settings').then(res => res.json()).then(data => {
  //     const settingsObj = data.reduce((acc, item) => {
  //       acc[item.name] = item.value
  //       return acc
  //     }, {})
  //     setSettings(settingsObj)
  //   })
  // }, [])

  function handleChange(evt) {
    const { name, checked } = evt.target
    // 函数式更新保证获取到最新的state快照
    setSettings(prev => ({
      ...prev,
      [name]: checked
    }))
  }

  return ( 
    <div>
      {/* 修正原代码变量名大小写错误 */}
      {allSettings.map(item => {
        return (
          <div key={item.name}>
            <Switch
              // 绑定state内的状态，不要直接读取原始数组的value
              checked={settings[item.name]}
              color="primary"
              name={item.name}
              inputProps={{ "aria-label": "primary checkbox" }}
              onChange={handleChange}                         
            />
            <label>
              {item.name}
            </label>
          </div>                    
        )
      })}
    </div>
  )
}
 
export default Settings

核心修改说明 #

• 状态初始化：用Array.reduce把配置数组转成键值对结构，后续修改和取值效率更高，也符合React状态的更新习惯
• 事件处理：通过事件对象自带的name属性匹配对应的设置项，直接更新对应状态，不需要额外传参
• 渲染绑定：checked属性直接从state取值，保证状态修改后视图自动同步更新

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