Fungsi set*** dipanggil tetapi pemaparan semula komponen fungsi tidak dilaksanakan.

Question

Skrip saya kelihatan seperti di bawah,

Selepas

api mendapat item itu, saya mahu memaparkan semula komponen dan membuat EnhancedTable muncul.

Tetapi dengan skrip ini, pengambilan api berjaya, tetapi EnhancedTable tidak muncul.

response.data mengembalikan data yang betul, tetapi tiada pemaparan semula dilakukan.

Di mana silap saya?

const MetaPanel = (props) =>{
    const [drawingItems,setDrawingItems] = React.useState([]);
    
    useEffect(() => {
        console.log("File List");
        var formData = new FormData();
        axios.defaults.xsrfHeaderName = "X-CSRFTOKEN";
        axios.defaults.xsrfCookieName = "csrftoken";
        axios.defaults.withCredentials = true;
        axios.get(`/api/drawings/`)
            
        .then(function (response) {
            console.log(response.data);
            setDrawingItems(response.data);
          
        })
        .catch(function (response) {
            console.log(response);
        });
    },[]);
    
    
    return (
    <div>
    <div>
        <p>FileList</p>
        {drawingItems.length != 0 &
           
            <EnhancedTable data={drawingItems}></EnhancedTable>
        }
    </div>
    </div>

    );
}

Answer 1

Boleh cuba:

        
FileList
        {drawingItems &&
            
        }
    

Dengan cara ini, anda boleh menambah baik bahagian useEffect

useEffect(() => {
        const fetchData= async()=>{
          const response = await axios.get(`/api/drawings/`)
          if(response){
            setDrawingItems(response?.data);
          }
        }
       fetchData() 
    },[]);