React中如何回显已保存的星期复选框选中状态？

你之前的实现没有给复选框绑定checked属性，React中受控复选框的选中状态由checked属性控制，而非value属性，所以直接给value赋值不会实现回显效果，按以下步骤修改即可：

• 第一步：初始化选中状态
  进入编辑页时，直接把服务端返回的已选日期数组作为storeDays的初始值。如果是异步请求获取的服务端数据，新增useEffect监听数据返回后更新storeDays：

  // 同步获取服务端数据的写法
  const [storeDays, setStoreDays] = useState(storeTime?.days || []);
  
  // 异步获取服务端数据需要新增这段
  useEffect(() => {
    if(storeTime?.days) {
      setStoreDays(storeTime.days)
    }
  }, [storeTime])
  

• 第二步：修正复选框的选中判断
  给每个input复选框加上checked属性，判断当前遍历的日期值是否存在于storeDays数组中，存在则返回true表示已勾选：

  checked={storeDays.includes(value)}
  

• 第三步：修正onChange更新逻辑
  补充勾选、取消勾选的数组更新逻辑，确保storeDays的状态和复选框选中状态同步：

  const handleDayChange = (e) => {
    const selectedDay = e.target.value;
    if(e.target.checked) {
      // 勾选时将日期加入数组
      setStoreDays([...storeDays, selectedDay])
    } else {
      // 取消勾选时将对应日期从数组中移除
      setStoreDays(storeDays.filter(day => day !== selectedDay))
    }
  }
  

完整修正代码 #

import { useState, useEffect, Fragment } from 'react';

const WeekDayPicker = ({ storeTime }) => {
  const [storeDays, setStoreDays] = useState(storeTime?.days || []);

  useEffect(() => {
    if(storeTime?.days) {
      setStoreDays(storeTime.days)
    }
  }, [storeTime])

  const handleDayChange = (e) => {
    const selectedDay = e.target.value;
    if(e.target.checked) {
      setStoreDays([...storeDays, selectedDay])
    } else {
      setStoreDays(storeDays.filter(day => day !== selectedDay))
    }
  }

  return (
    <>
      <div className="first-row-days">
        {["MONDAY", "TUESDAY", "WEDNESDAY", "THURSDAY"].map(
          (value, index) => (
            <Fragment key={"iterate-1-" + index}>
              <input
                type="checkbox"
                value={value}
                key={"first-row-days-" + index}
                checked={storeDays.includes(value)}
                onChange={handleDayChange}
              />
              <label>{value}</label>
            </Fragment>
          )
        )}
      </div>
      <br />
      <div className="second-row-days">
        {["FRIDAY", "SATURDAY", "SUNDAY"].map((value, index) => (
          <Fragment key={"iterate-2-" + index}>
            <input
              type="checkbox"
              value={value}
              key={"second-row-days-" + index}
              checked={storeDays.includes(value)}
              onChange={handleDayChange}
            />
            <label>{value}</label>
          </Fragment>
        ))}
      </div>
    </>
  )
}

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