我是React的新手，在使用Axios时遇到了一些问题。我创建了一个新的create-react-app来隔离我遇到的问题，并上传到这里寻求帮助。基本的get请求使用在线API。useEffect运行，从api检索数据（你可以在www.example.com上看到console.logres.data）。然后我用结果设置了目标useState。但是我不能在console.log或.map函数中读取目标。goals[] array（0）
我做错了什么？非常感谢，节日快乐！
App.js

import axios from 'axios'
import { useEffect, useState } from 'react'
function Goals() {
    const [goals, setGoals] = useState([])
    useEffect(() => {
        const getApi = () => {
            axios.get('https://jsonplaceholder.typicode.com/todos/2')
                .then(res => {
                    console.log('res data :', res.data)
                    setGoals(res.data)
                    console.log('goals array :', { goals })
                })
                .catch(err => { console.log(err) })
        }
        getApi()
    }, [])

    return (
        <div>
            {goals ? (
                <><h4>working...</h4>
                    {goals.map((goal) => {
                        <h4>{goal.title}</h4>
                    })}
                </>
            ) : (
                <div><h4>Nothing written</h4></div>
            )
            }
        </div>
    )
}

export default Goals

运行时的控制台日志：enter image description here