我正在从事一个 mern 项目。我想使用 useState 通过我的数据库在我的 React 页面中呈现一个对象数组。

数据库的结构是

我的代码

import React,{useEffect,useState} from 'react'
import { NavLink,useParams } from 'react-router-dom'
import Adminbar from './Adminbar'

const Contracter = () => {
    const { id } = useParams();
    const [member,setMember] = useState([])

    const tofetchallmember = async ()=>{
        try {
  
            const res = await fetch(`/member/${id}`,{
                method :"GET",
                headers : {
                    Accept : "application/json",
                    "Content-Type" : "application/json"
                },
                credentials : "include"
            })
  
            const data = await res.json()
            setMember(data)
            console.log(data.name);
            console.log(data.projectmembers[0]);
            console.log(data.projectmembers[0].attendance);
            
        } catch (error) {
            console.log(error);         
        }
    }

   

    useEffect(() => {
        tofetchallmember()
    }, [])

    return (
        <>

      
        <Adminbar/>
     
            <div className='container mt-5'>
                <div className='row'>
                    <div className='col-sm-5 col-md-5 col-lg-5'>
                        <div class="row align-items-md-stretch">

                            <div class="h-100 p-5 text-bg-light rounded-3">
                                <h2>Contracter List of {member.name}</h2>
                                <ol class="list-group list-group-numbered mt-5

为了实现这一点，我尝试了上述代码。如果我尝试这样做：

setMember(data)
            console.log(data.name);
            console.log(data.projectmembers[0]);
            console.log(data.projectmembers[0].attendance);

它会完美地显示我控制台中的所有数据，但是当我尝试通过以下方式在我的 html 代码中呈现它时：

<h2>Contracter List of {member.projectmembers[0].name}</h2>

它显示以下错误：

Uncaught TypeError: Cannot read properties of undefined (reading '0')