Das dynamische Festlegen des Status in React ist ungültig

Question

Ich versuche, ein Array dynamisch festzulegen und es mit dem useState-Hook zu rendern. Aber es scheint, dass das Array nicht festgelegt ist. Hier ist mein 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() gibt ein Array von Objekten zurück.

In manchen Fällen ist es sinnvoll, den Status auf diese Weise festzulegen. Was ist hier das eigentliche Problem?

Answer 1

这样你就可以渲染数据了

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>
    </>
  );
};