React Useeffect首先返回空数组

Question

我制作了一个 react 项目，在加载数据时，我需要使用 fetch-get 从 json 中获取我的数据。但是，当我这样做时，它首先发送空数组，然后在 1-2 秒后向我发送数据。因此，当它的空数据开始时，我的渲染开始了，所以我的应用程序崩溃了。我怎样才能在没有空数据的情况下做到这一点？我的代码：

const { id } = useParams();
  const [articles, setArticles] = useState([]);
  const [collection, setCollection] = useState([]);

 

     useEffect(() => {
        fetch("http://localhost:3001/api/v1/article/bycollection/" + `${id}`)
          .then((x) => x.json())
          .then((z) => {
            setArticles(z);
          }, []);
        fetch("http://localhost:3001/api/v1/collection/" + `${id}`)
          .then((x) => x.json())
          .then((z) => {
            setCollection(z);
          }, []);
      }, [id]);

空错误行：

return ( 
      <div className="tomiddle ">
          <div className="mb-3">
            <BreadCrumbComp data={breadCrumbData} />
          </div>
    
          <div className="collectionBg">
            <div className="collectionHeader flex">
              <div className="w-32 h-32 p-4 mt-2 text-5xl">
                <i className={collection.icon}></i>
              </div>
              <div>
                <h1 className="collectionTitle ">{collection.name}</h1>
                <WriterGroupInfo groupData={collection} /> // Here i getting error. 
                      Its sending empty collection
              </div>
            </div>)

作家组信息：

const WriterGroupInfo = (props) => {
  const prop = props.groupData;
  console.log("prop=>", props); // Showing empty array.
  const articles = prop.articles.slice(0, 3);
  const last = articles[articles.length - 1];
  const lastAuthor = articles.length > 1 ? " ve " + last.author.name : "";

  const authorNames =
    articles
      .slice(0, 2)
      .map((a) => a.author.name)
      .join(", ") + lastAuthor;

  return (
    
    <div className="flex  pt-4  ">
      <Avatar.Group>
        {articles.map((x) => (
          <Avatar key={x.id} src={x.author.avatar} />
        ))}
      </Avatar.Group>
      <div className="text-collection-small-500 truncate text-xs pl-2 pt-1">
        <span>Bu koleksiyonda {prop.articles.length} makale mevcut</span>
        <br />

        {articles.length > 0 ? (
          <span className="truncate mr-2">
            <span className="text-gray-400 ">Yazarlar: </span>
            {authorNames}
          </span>
        ) : (
          <></>
        )}
      </div>
    </div>
  );
};

Answer 1

发生这种情况是因为您将collecion 的第一个值设置为空数组：

const [collection, setCollection] = useState([]);

你应该这样处理这种情况：

return ( 
  <div className="tomiddle ">
      <div className="mb-3">
        <BreadCrumbComp data={breadCrumbData} />
      </div>
     {collection.length === 0 ?
      <div> No data for collection </div> :
      <div className="collectionBg">
        <div className="collectionHeader flex">
          <div className="w-32 h-32 p-4 mt-2 text-5xl">
            <i className={collection.icon}></i>
          </div>
          <div>
            <h1 className="collectionTitle ">{collection.name}</h1>
            <WriterGroupInfo groupData={collection} /> // Here i getting error. 
                  Its sending empty collection
          </div>
        }
        </div>)

Answer 2

您在 useEffect 中的回调有 2 个异步调用，您无需等待它们完成。他们慢慢来。在此之前，下一次渲染已经发生了，因此您的数据会空一段时间，直到您的提取（以及后续的setState）完成。 由于两个 fetch 都是独立的，您可以使用 Promise.all 和 await 等待它们。

useEffect( () => { 
async yourFunction() {
let promise1 = fetch("http://localhost:3001/api/v1/article/bycollection/" + `${id}`).then((x) => x.json()).then((z) => {
            setArticles(z);
          });
let promise2 = fetch("http://localhost:3001/api/v1/collection/" + `${id}`).then((x) => x.json())
          .then((z) => {
            setCollection(z);
          });

let results = await Promise.all([promise1,promise2]);
}
yourFunction();

}, [id]);

另外，[] 作为第二个then() 的额外参数在我看来不是必需的。

Answer 3

问题是 UseEffect 异步工作，它在初始渲染后触发。因此，在初始渲染时，它会尝试使用 null/Empty 数组值进行填充。您可以使用 useState 启动传递数组值，例如 const[value,setValue]=useState([]) 。