La fonction set*** est appelée mais le nouveau rendu du composant fonction n'est pas exécuté.

Question

Mon script ressemble à ci-dessous,

Une fois que l'

api a récupéré l'élément, je souhaite restituer le composant et faire apparaître EnhancedTable.

Mais avec ce script, la récupération de l'API réussit, mais EnhancedTable n'apparaît pas.

response.data renvoie les données correctes, mais aucun nouveau rendu n'est effectué.

Où est-ce que je me suis trompé ?

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

Pouvez-vous l'essayer :

        
FileList
        {drawingItems &&
            
        }
    

Au fait, vous pouvez améliorer la partie useEffect

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