React 中 Arrays 的条件渲染：For vs Map

Question

我是 React 和构建日历应用程序的新手。 While playing around with state to try understand it better, I noticed that my 'remove booking' function required a state update for it to work, while my 'add booking' function worked perfectly without state.

删除预订：需要 state 才能工作

const [timeslots, setTimeslots] = useState(slots);
    

    const removeBookings = (bookingid) => {
        
        let newSlots = [...timeslots];
        delete newSlots[bookingid].bookedWith;
        setTimeslots(newSlots);
    }

添加预订：不需要 state 即可工作

   const addBookings = (slotid, tutorName) => {
        timeslots[slotid].bookedWith = tutorName;
      }

我认为这是因为我的时间段组件是如何呈现的。 每个插槽都是通过.map() 从数组的一个项目中渲染出来的，因为大多数在线教程都建议这是从数组中渲染组件的最佳方式。

timeslots.map(slot => {
                
                if (!slot.bookedWith) {
                return <EmptyTimeslot [...props / logic] />
                } else {
                    return <BookedTimeslot [...props / logic]/> 
                }
                
                })

因此，对于每个 EmptyTimeslot，BookedTimeslot 的数据也是可用的。 这就是为什么我的添加预订 function（emptyTimeslot ->bookedTimeslot）不需要 state 的原因。 但是，删除预订 (bookedTimeslot -> emptyTimeslot) 需要重新渲染插槽，因为代码不能“向上流动”。

每次都必须渲染很多插槽。 因此，我的问题是，不是映射每个插槽（每个插槽中都存在和信息），而是使用 for 循环仅呈现相关插槽而不是两个插槽的信息会更有效吗？ 我假设这需要 state 用于添加预订和删除预订 function。 像这样：

     for (let i=0;i<timeslots.length;i++) {
             if (!timeslot[i].bookedWith) {
                  return <EmptyTimeslot />
    } else {
                  return <BookedTimeslot />
}
    }

希望这是有道理的。 感谢您的任何帮助。

Answer 1

您的addBooking function不好。 即使它似乎“有效”，您也不应该改变您的 state 值。 您应该使用 state 设置器 function 来更新它们，这就是您在removeBookings中所做的。

因此，我的问题是，不是映射每个插槽（每个插槽中都存在和信息），而是使用 for 循环仅呈现相关插槽而不是两个插槽的信息会更有效吗？

您的map方法不能同时渲染两者。 对于每个插槽，它使用if语句返回一个组件或另一个组件，具体取决于插槽是否被预订。 我不确定你提出的for循环如何在这里工作。 它只会在第一次迭代完成之前return 。

我假设这需要 state 用于添加预订和删除预订 function。

您应该对所有时隙 state 更新使用setTimeslots ，并且您不应该改变您的 state 值。 无论您如何渲染它们都是如此。