Question

我一直在尝试编写一些简单的React代码，以从模拟API中获取数据并将其显示在页面上。但是，当尝试映射axios从异步函数返回的帖子数组时，会给我一个错误。

我尝试将props.posts设置为变量，但仍然无法正常工作。

这是我的应用程序结构，以及我用来以JSON格式从API获取用户的函数：

function App() {
    // Hook that declares a posts state
    const [posts, setPosts] = useState([])

    useEffect(() => {
        getPosts().then(setPosts)
    }, [])
    return (
        <div className='App'>
            <header className='App-header'>
                <PostList posts={posts} />
            </header>
        </div>
    )
}

function PostList(props) {
    return (
        <ul>
            {props.posts.map(post => (
                <Post post={post} />
            ))}
        </ul>
    )
}

function Post(props) {
    return <li>{props.post.title}</li>
}

async function getPosts() {
    try {
        let posts = await axios.get(
            'https://jsonplaceholder.typicode.com/posts'
        )
        console.log(posts)
        return posts
    } catch (error) {
        console.error(error)
    }
}

这是有问题的位：

function PostList(props) {
    return (
        <ul>
            {props.posts.map(post => (
                <Post post={post} />
            ))}
        </ul>
    )
}

我希望该应用程序可以映射整个帖子数组，但是每次都会给我一个错误。

Answer 1

最可能的情况是您的axios请求由于某种原因而失败。也许有错误或CORS问题，并且posts不是数组，当您进行设置时。您应该在useEffect或getPosts()中进行一些验证，例如：

async function getPosts() {
    try {
        let posts = await axios.get(
            'https://jsonplaceholder.typicode.com/posts'
        )
        if (!Array.isArray(posts)) {
          console.log("posts isn't an array: ", posts);
          return [];
        }
        return posts;
    } catch (error) {
        console.error('An error occurred: ', error);
        return [];
    }
}

只要确保即使有错误，也总是返回一个数组。

Answer 2

如果post不是数组，请尝试为posts属性添加三元组：

return (
    <div className='App'>
        <header className='App-header'>
            <PostList posts={posts && posts.length > 0 ? posts : []} />
        </header>
    </div>
)

Answer 3

Axios返回一个对象，其中包含有关请求的信息（状态，标头，数据等），我认为您需要找到request.data。该错误是因为您试图映射到对象而不是数组。

 async function getPosts() {
    try {
        let posts = await axios.get(
            'https://jsonplaceholder.typicode.com/posts'
        )
        return posts.data 
               ˆˆˆˆˆˆˆˆˆˆ
    } catch (error) {
       ...
    }
}

docs：https://github.com/axios/axios

React给我TypeError：尝试映射一系列帖子时，props.posts.map不是函数

3 个答案: