React给我TypeError：尝试通过帖子数组映射时props.posts.map不是函数

Question

I've been trying to write some simple React code to fetch data from a mock API and display it on a page. But when trying to map through my array of posts returned by axios from an async function it gives me an error.

I've tried setting props.posts to a variable and it still doesn't work.

Here's my app structure and the function I use to get the users from the API as JSON:

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

And this is the problematic bit:

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

I expect the application to map through the array of posts but it gives me an error every time.

Answer 1

The most likely scenario is that your axios request is failing for some reason. Maybe there's an error, or a CORS problem, and posts isn't an array when you go to set it. You should have some validation either in your useEffect or in getPosts() like:

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 [];
    }
}

Just make sure, even if there's an error, you're always returning an array.

Answer 2

Try adding a ternary for the posts attribute in case post is not an array:

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

Answer 3

Axios return an object with info about the request (status, headers, data, etc) I think you need to find request.data. The error is because you are trying to map over an object instead of an array.

 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