Die Funktion set*** wird aufgerufen, das erneute Rendern der Funktionskomponente wird jedoch nicht ausgeführt.

Question

Mein Skript sieht wie folgt aus,

Nachdem die

api das Element erhält, möchte ich die Komponente erneut rendern und EnhancedTable erscheinen lassen.

Aber mit diesem Skript ist der API-Abruf erfolgreich, aber die EnhancedTable wird nicht angezeigt.

response.data gibt die korrekten Daten zurück, es wird jedoch kein erneutes Rendern durchgeführt.

Was habe ich falsch gemacht?

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

你能尝试一下吗：

        
FileList
        {drawingItems &&
            
        }
    

顺便说一句，你可以改进 useEffect 部分

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