L'état de définition dynamique dans React n'est pas valide

Question

J'essaie de configurer dynamiquement un tableau et de le restituer à l'aide du hook useState. Mais il semble que le tableau ne soit pas défini. Voici mon code :

import React, { useState, useEffect } from "react";

export default ({ item }) => {
    const [attachments, setAttachments] = useState([]);
    const setAttachmentValues = function(response){
        setAttachments(response.data);
        
    }
    const fetchMedia = async ()=> {
        setAttachments([]);           
        await apiCall().then((response) => {                
            setAttachmentValues(response);                
        });
    }
    
    useEffect(() => {
        fetchMedia();
    }, []);
    return (
        <>
           <div className="w-full">
                {(attachments.map((ele) => {
                      <div>{ele}</div>
                )} 
        </>
    )
}

apiCall() renverra un tableau d'objets.

Dans certains cas, il est valable de définir l'état de cette façon. Quel est le véritable problème ici ?

Answer 1

Vous pouvez ainsi restituer les données

import React, { useState, useEffect } from 'react';

export default ({ item }) => {
  const [attachments, setAttachments] = useState([]);

  useEffect(() => {
    
    fetch('https://jsonplaceholder.typicode.com/users')
      .then((response) => response.json())
      .then((response) => {
        setAttachments(response);
        console.log(response);
      });
  }, []);
  return (
    <>
       <div>
        {attachments.map(item => <div key={item.username}> {item.username} </div> )}
      </div>
    </>
  );
};