Question

我想使用map（）函数渲染多个<li>组件。屏幕上没有呈现任何内容。我也没有收到任何错误消息，所以我一无所知。

        reviewCard = reviews.map((review, index) => {
            const url = `http://localhost:3001/users/${review.user_id}`;
            axios
                .get(url)
                .then(response => {
                    return (
                        <li key={index}>
                            <ReviewCard 
                                review={review} 
                                user={response.data}
                            />
                        </li>
                    );
                })
                .catch(error => {
                    console.log(error);
                });
            }
        );

以下代码可以工作。

        reviewCard = reviews.map((review, index) => (
            <li key={index}>
                <ReviewCard review={review} />
            </li>
        ));

如果您有任何建议，我将不胜感激。

谢谢：）

Answer 1

JSX不是调用某些异步函数的最佳位置。然后，Axios不会调用组件的重新渲染。您必须使用useEffect来调用axios方法，并使用useState来重新渲染组件并存储结果。

只看下面的代码：

import React, { useEffect, useState, useCallback } from 'react';

const Cards = ({ reviews }) => {
  const [isLoading, setIsLoading] = useState(true);
  const [users, setUsers] = useState([]); // use state rerender component on each call setUsers;

  const fetchUsers = useCallback(() => {
    try {
      // collect user requests to array
      const listOfRequests = reviews.map((item) => axios.get(`http://localhost:3001/users/${item.user_id}`));
      const responses = await Promise.all(listOfRequests);
      const users = responses.map((item) => item.data);
      setUsers(users);
      setIsLoading(false);
    } catch(error) {
      console.error(error);
      setIsLoading(false);
    }
  }, []);


  useEffect(() => {
    fetchUsers();
  }, []);

  if (isLoading) {
    return <div>Loading...</div>
  }

  if (users.length === 0) {
    return <div>something happens</div>
  }

  return (
    <ul>
      {users.map((user) => <li key={user.id}><Review user={user} /></li>)}
    </ul>
  )
}

array.map（）无法按预期方式在React中渲染<li>组件

1 个答案: