项目问题记录

• 1. alpha项目记录：添加radio/switch按钮
  • 问题1.radio和checkbox绑定问题：
    • 使用radioGroup的name属性，name:checkbox.id解决
  • 问题2.Switch组件在list.Item中状态一致问题
    • setChecked(参数为e.target而不是e) 可能是e的冒泡事件引发这个问题（事件委托基础不好）
  • 问题3.radio组件在list.Item中状态一致问题
    • 在React中，事件处理函数通常用于更新组件的状态。对于 RadioGroup 组件，onChange 事件会在用户选择不同的单选按钮时被触发，并且会传递一个事件对象。这个事件对象包含了被选中单选按钮的值。

toggleRadio 函数：

更新状态：更新与 RadioGroup 相关联的状态，以反映用户的选择。 执行逻辑：根据用户的选择执行某些逻辑操作。 示例实现 假设你有一个列表，每个列表项都有一个 RadioGroup，你可以这样实现 toggleRadio 函数：

import React, { useState } from 'react';
import { List, Checkbox, Avatar, Collapsible, RadioGroup, Radio, Switch } from 'semi-ui';

function App({ items }) {
  // 假设有一个状态管理每个 RadioGroup 的值
  const [radioValues, setRadioValues] = useState({});

  // toggleRadio 事件处理函数
  const toggleRadio = (item, value) => {
    setRadioValues((prevValues) => ({
      ...prevValues,
      [item]: value
    }));
  };

  return (
    <List>
      {items.map((item) => (
        <List.Item key={item}>
          <Checkbox id={item} value={item} className="flex items-center">
            {item}
          </Checkbox>
          <Collapsible isOpen={selected.includes(item)} >
            <div style={{ display: "flex", flexDirection: "column", margin: "10px" }}>
              <div style={{ display: "flex", paddingRight: "20px", justifyContent: "space-between" }}>
                <RadioGroup name={item} onChange={(e) => toggleRadio(item, e.target.value)} value={radioValues[item]} style={{ marginLeft: '70px' }}>
                  <Radio value="1">1</Radio>
                  <Radio value="2">2</Radio>
                </RadioGroup>
              </div>
              <div style={{ display: "flex", justifyContent: "space-between" }}>
                <Switch aria-labelledby={item} onChange={toggleSwitch} checked={checked} style={{ marginRight: '20px' }} />
              </div>
            </div>
          </Collapsible>
        </List.Item>
      ))}
    </List>
  );
}

export default App;

状态管理：使用 useState 钩子创建了一个状态 radioValues 来管理每个 RadioGroup 的值。 事件处理函数：toggleRadio 函数接收两个参数：item 和 value。它更新 radioValues 状态，使得每个 RadioGroup 可以独立控制其选项。 总结 toggleRadio 是一个事件处理函数，用于处理 RadioGroup 组件的 onChange 事件。 它通常用于更新状态，以反映用户的选择。 确保每个 RadioGroup 组件的状态独立，可以避免状态冲突和不必要的渲染。

- 关于toggleRadio中的分析：
1.preValues参数是什么？
`prevValues` 这个参数在 `toggleRadio` 函数中并没有被显式定义，
这里的 `prevValues` 是一个占位符，表示当前的 `radioValues` 状态。
React 在调用这个函数时，会自动将当前的 `radioValues` 状态作为参数传递给 `prevValues`。
它实际上是由 `setRadioValues` 函数隐式提供的。

在 React 中，当你使用函数形式更新状态时，React 会自动将当前状态作为参数传递给这个函数。这个参数可以被命名为任何名字，例如 prevValues、currentState 或者 currentRadioValues 等。

 const toggleRadio = (item, value) => {
    setRadioValues((prevValues) => ({
      ...prevValues,
      [item]: value
    }));
  };

• 问题4 radio返回的数据如何记录
  • （这里我觉得可以优化）使用全局RadioMap，记录一个map(key:item,value:radioValue),目的是如果用户修改选择时可以覆盖radio的值

项目中小东西oi火热记录一下

• e.preventDefault();
  • e 是一个事件对象，通常在事件处理函数中作为参数传递。每个事件对象都有一个 preventDefault 方法，当调用这个方法时，它会告诉浏览器不要执行与该事件相关联的默认动作。
  • 在按钮等handle函数中开头加上e.preventDefault()可以阻止后面对e的处理，比单纯把这个函数注释掉好使

• 问题5：在一个函数中先用useState更新一个状态后需要使用axios.put将这个状态值发送出去，但是因为useState是异步函数，axios.put是同步函数导致使用axios.put发送状态值时不是更新后的状态值，如何解决？

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

function MyComponent() {
  const [data, setData] = useState(null);

  useEffect(() => {
    if (data) {
      axios.put('/some-url', data)
        .then(response => {
          console.log('Data sent successfully', response);
        })
        .catch(error => {
          console.error('Error sending data', error);
        });
    }
  }, [data]); // 依赖数组中的data确保只有data变化时才触发

  const handleUpdateData = newData => {
    setData(newData);
  };

  return (
    // ...你的组件渲染逻辑...
  );
}