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

Question

I'm new to React and building a calendar application. 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.

Remove bookings: requires state to work

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

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

Add bookings: does not require state to work

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

I think that this is because of how my timeslot components are rendered. Each slot is rendered from an item of an array through.map(), as most tutorials online suggest is the best way to render components from an array.

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

So, with each EmptyTimeslot, the data for a BookedTimeslot is available as well. That's why state is not required for my add bookings function (emptyTimeslot -> bookedTimeslot). However, removing a booking (bookedTimeslot -> emptyTimeslot) requires a rerender of the slots, since the code cannot 'flow upwards'.

There are a lot of slots that have to be rendered each time. My question is therefore, instead of mapping each slot (with both and information present in each slot), would it be more efficient to use a for loop to only render the relevant slot, rather than the information for both slots? This I assume would require state to be used for both the add booking and remove booking function. Like this:

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

Hope that makes sense. Thank you for any help.

Answer 1

Your addBooking function is bad . Even if it seems to "work", you should not be mutating your state values. You should be using a state setter function to update them, which is what you are doing in removeBookings .

My question is therefore, instead of mapping each slot (with both and information present in each slot), would it be more efficient to use a for loop to only render the relevant slot, rather than the information for both slots?

Your map approach is not rendering both. For each slot, it uses an if statement to return one component or the other depending on whether the slot is booked. I'm not sure how the for loop you're proposing would even work here. It would just return before the first iteration completed.

This I assume would require state to be used for both the add booking and remove booking function.

You should be using setTimeslots for all timeslot state updates and you should not be mutating your state values. That is true no matter how you render them.