Menetapkan keadaan secara dinamik dalam React adalah tidak sah

Question

Saya cuba menyediakan tatasusunan secara dinamik dan memaparkannya menggunakan cangkuk useState. Tetapi nampaknya array tidak ditetapkan. Inilah kod saya:

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() akan mengembalikan pelbagai objek.

Dalam beberapa kes adalah sah untuk menetapkan keadaan dengan cara ini. Apakah isu sebenar di sini?

Answer 1

Jadi anda boleh membuat data

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