.map 函数不呈现反应数据 [关闭]

Question

我有一个调用 API 的函数，并在 console.logged 时返回一个数组。使用效果正在运行，并正常返回数组但它永远不会更新前端。一直在研究这个问题，还没有找到解决方案。我错过了什么吗？

useEffect(()=>{
        const fetchData = async (user) => {
            console.log(user)
            const { data, error } = await supabase
                .from('contacts')
                .select()
                .match({ user_id: user })
            return data;
        }
        const user = supabase.auth.user().id;
        fetchData(user).then((data)=> {
            // console.log(data)
            setContacts(data);
            console.log(contacts)
        }).catch(error=>{
            console.log(error)
        })
        // returns an array or objects. each object is a contact    
    },[contacts])
    return(
        <div>
            <h1>All Contacts</h1>
            <tbody>
                <tr>
                    <th>Name</th>
                    <th>email</th>
                    <th>phone</th>
                    <th>notes</th>
                </tr>
                {
                    contacts.map((contact, i) => {
                        <tr key={i}>
                            <td>{contact.prosepct_name}</td>
                            <td>{contact.prospect_email}</td>
                            <td>{contact.prospect_phone}</td>
                            <td>{contact.notes}</td>
                        </tr>
                    })
                }
                
            </tbody>

Answer 1

乍一看 - 您似乎需要将 map 函数的内部部分包装在 return 中。

 {
    contacts.map((contact, i) => {
      return (
        <tr key={i}>
          <td>{contact.prosepct_name}</td>
          <td>{contact.prospect_email}</td>
          <td>{contact.prospect_phone}</td>
          <td>{contact.notes}</td>
        </tr>
      )
    })
  }