如何在预订时重新渲染反应组件

Question

        import React, {useEffect, useState} from 'react'
        import axios from 'axios'
        import '../App.css'
        import { useNavigate } from 'react-router-dom'
        import { gettingData } from '../api/getUserData'
        import { handleLogout } from '../api/handleLogout'
        import { getGroundNear } from '../api/getGroundNearby'
        import { bookingSlot } from '../api/bookingSlot'
    
    
        const Dashboard = () => {
            const navigate = useNavigate()
            const [userData, setUser] = useState(undefined)
            const [groundData, setGroundData] = useState([])
            const [currentTime, setCurrentTime] = useState(Date.now())
            const [isOccupied, setIsOccupied] = useState(false)
    
    
        axios.defaults.withCredentials = true;
    
         useEffect(()=>{
          gettingData(setUser)
        },[])
      
        useEffect(()=>{
          console.log("usee 2")
          if(userData){
            console.log(userData)
            getGroundNear(userData.pincode, 0, 50000, setGroundData) 
          }
            
        },userData)
    
      
        const handleBooking = (slotId, groundId, userId) => {
          if(bookingSlot(slotId, groundId, userId)){
            setIsOccupied(true)
          }
    
        }
    
    
      return (
        <div>
          <button onClick={() => {handleLogout(navigate)}}>Logout</button>
          
          <div>
            <h3>Grounds</h3>
            {groundData && groundData.length &&
              groundData?.map((ground)=>{
                return(
                  <div id='cards'>
                    <img src={ground.photo} alt='ground'></img>
                    <h4>{ground.ground}</h4>
                    <span>Type: </span><span>{ground.type}</span><br/>
                    <span>{ground.discription}</span>
                    
                    <div className='timings'>
                      <div className='slots'>
                        {
                        ground?.slots?.map(slot => {
                          return (
                            <>


{/*I want this component to re-render whenver the button is clicked so that it has updated views of slot booking*/}

                          <div id='slot-id'>
                            {!slot.occupied ? (
                              <button onClick={() => handleBooking(slot._id, slot.ground_id, userData._id)}>{slot.time_start} - {slot.time_end}</button>
                            ) : (
                              <button id='occupied-slot' style={{border: '3px dotted red', cursor: 'not-allowed', backgroundColor: '#FF999C'}}>{slot.time_start} - {slot.time_end}</button>
                            )}
                          </div>
                        
                        </>
                      )
                    })}
                  </div>
                </div>
              </div>
            )
          })
        }

      </div>

    </div>    
  )
}

export default Dashboard

挑战：在 React 中单击按钮时重新渲染 slot-id Div

我正在开发一个显示可预订时段的 React 组件。每个插槽都有一个按钮，我希望每当单击按钮时整个插槽 ID div 都会重新渲染。

在提供的代码中，按钮点击触发了handleBooking函数，但它并没有直接导致slot-id div重新渲染。这意味着视觉外观不会改变，除非数据源（例如 API 调用）更新该组件外部的 slot.ocpied 属性。

期望的行为：我们希望 slot-id div 在按钮单击后立即重新渲染，即使外部数据源尚未更新。这将通过立即直观地反映按钮点击来提供响应更快的用户体验

Answer 1

您应该为按钮创建一个单独的组件，而不是简单地将

slot.occupied

作为 prop 传递，并让更深的组件应用所需的样式。

然后当

slot.occupied

属性改变时，更深的组件将重新渲染。