Javascript 在React中处理复选框

我正在编写一个组件来处理一周中的天数和小时数。以时间状态传递给子组件“UpdateHours”的主组件在对象中传递一周中的天数，所有天数都设置为默认值true。因此，默认情况下，所有复选框都处于选中状态。当我在当天单击时，该对象在我的控制台上更新为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}/>) : (  "" )}

此函数调用使用新对象更新firestore数据库的my函数

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
  }

---

在

handleDayChange

函数中，您可以直接在

time

道具上更新值。值得注意的是，React中的props应该是只读的（）。原因是，React不会进行深入的比较，而只是检查引用是否已更改

因为

props.time

是一个对象，所以当您调用

时，让hourData=props.time

设置

hourData

等于对

props.time

的引用。然后，当您更新

hourData

上的值时，它实际上正在更新

props.time

，当您将

hourData

传递到

props.time

时，它正在传递对

props.time

的引用。由于引用未更改，React不知道对象已发生变化，因此不会使用更新的值再次渲染

希望它能像更新

handleDayChange

函数一样简单，创建一个新对象，而不是改变

道具。时间

：

功能处理日变化（日）{
常数hourData={
…道具，时间，
[天]：！道具。时间[天]
};
道具设置时间更改（小时数据）；
}

您是否尝试过删除

div的
onClick
？我尝试过，但这会使所有内容都无响应，这会给我带来一个错误，但我只是尝试复制，现在它只会使整个复选框无响应更新的道具是否正确传递到
UpdateHours.js
？比如，你能在
UpdateHours
组件的return语句的render/上方记录更新后的值吗？看起来是的，我在返回的上方放了一个console.log，当我单击save按钮时，我看到了我希望在记录时看到的值当你记录它时，
props.time.mon
是什么样子的？我想这是真/假，但我只是想核实一下。
  function handleDayChange(day) {
    let hourData = props.time;
    hourData[day] = !props.time[day];
    props.setTimeChange(hourData);

  }

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

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
  }