javascript - 在 React 中处理复选框

Question

我正在编写一个组件，用于处理一周中的天数和小时数。将时间状态传递给子组件“UpdateHours”的主要组件在对象中传递一周中的天数，所有天数设置为默认值 true。所以默认情况下所有复选框都是选中的。当我单击该日期时，该对象在我的控制台上更新为 false，但即使该值设置为 false，该复选框仍保持选中状态。奇怪的是，当我单击页面上更新后端的按钮时，我选中 false 的框将变为未选中状态。

从父组件传递的对象

function handleAddNewHour() {
    var uid = generateUUID();
    var newHour = {
      mon: true,
      tue: true,
      wed: true,
      thu: true,
      fri: true,
      sat: true,
      sun: true,
      start: 0,
      end: 0,
      service_type: "all",
      id: uid
    };

    setTime(newHour);
  }



 {time != null ? (<UpdateHour time={time} setTimeChange={handleTimeUpdate}/>) : (  "" )}

UpdateHours.js 上的元素

 <div className="newHoursDay" onClick={() => handleDayChange("mon")}>
            <input
              type="checkbox"
              name="new_hours_mon"
              checked={props.time.mon}
              value={props.time.mon}
              onChange={() => handleDayChange("mon")}
            />
            <label>Mon</label>
          </div>

这里是函数

  function handleDayChange(day) {
    let hourData = props.time;
    hourData[day] = !props.time[day];
    props.setTimeChange(hourData);

  }

  function handleServiceChange(serviceType) {
    props.time[serviceType] = serviceTypes;
    setState({});
  }

此函数调用我的函数，用新对象更新 firestore 数据库

function handleSave() {
    var hoursData = {
      hours: {}
    };
    if (typeof store.hours !== "undefined") {
      hoursData.hours = store.hours;
    }
    hoursData.hours[props.time.id] = {};
    Object.keys(props.time).forEach(prop => {
      if (prop === "id") {
        hoursData.hours[props.time.id][prop] = props.time[prop];
      }
    });
    changeStoreData(hoursData);

    //updatestore
  }

Answer 1

看起来在您的 handleDayChange 函数中，您直接在 time 属性上更新值。值得注意的是，React 中的 props 应该是只读的( https://reactjs.org/docs/components-and-props.html#props-are-read-only )。原因是，React 没有进行深度比较，而只是检查引用是否已更改。

因为 props.time 是一个对象，所以当您调用 let hourData = props.time 时，您将 hourData 设置为等于引用到 props.time。然后，当您更新 hourData 上的值时，它实际上是在更新 props.time，并且当您将 hourData 传递给 props.setTimeChange 它将引用传递给 props.time。由于引用没有改变，React 不知道对象已经发生了变化，因此不会使用更新后的值再次渲染。

希望这就像更新 handleDayChange 函数来创建新对象一样简单，而不是改变 props.time:

function handleDayChange(day) {
    const hourData = {
        ...props.time,
        [day]: !props.time[day]
    };
    props.setTimeChange(hourData);

}