Question

我正在从 getUserCollection 函数获取图像URL列表，该函数返回promise，最初在控制台中状态为空，但一旦获得来自功能，状态的响应正在控制台中进行更新，但组件不会针对更新后的状态重新呈现。我知道，如果我制作一个单独的组件并将状态作为prop传递，那么它肯定会重新渲染为更新后的状态。但是，为什么它不会在同一组件内发生？有人可以帮忙吗？另外，当我在useEffect内将状态（ userCollection ）作为第二个参数传递时，它将无限次运行。

import React, { useState, useEffect } from "react";
import { getUserCollection } from "../../firebase/firebase";

const CollectionPage = ({ userAuth }) => {
  const [userCollection, setUserCollection] = useState([]);

  useEffect(() => {
    getUserCollection(userAuth.uid)
      .then((response) => {
        if (response) setUserCollection(response);
      })
      .catch((error) => console.log(error));
  }, []);                                                       
  console.log("updating???", userCollection);    //its updating in console
  return (
    <main className="container">
      <h3>collection page</h3>
      {userCollection.map((url) => (
        <div class="card-columns">
          <div class="card">
            <img
              src={ url}                  // its not updating 
              class="card-img-top"
              alt="user-collection"
              width="100"
            />
          </div>
        </div>
      ))}
    </main>
  );
};

export default CollectionPage;

Answer 1

https://reactjs.org/docs/hooks-effect.html

“如果您传递一个空数组（[]），则效果内的道具和状态将始终具有其初始值。当传递[]作为第二个参数更接近熟悉的componentDidMount和componentWillUnmount心智模型时，通常是更好的解决方案，以避免过于频繁地重新运行效果。另外，不要忘记，React推迟了useEffect的运行，直到浏览器绘制完毕，这样多余的工作就没什么问题了。”

第二个参数是触发组件重新呈现的原因，将其设置为状态变量userCollection会在每次状态更新时触发useEffect运行-导致无限循环，因为useEffect更新状态。

您要实际触发什么重新渲染？如果最初应该为空白，然后仅运行一次以加载图像，则可以将其更改为以下内容：

useEffect(() => {
    if(!userCollection){
    getUserCollection(userAuth.uid)
      .then((response) => {
        if (response) setUserCollection(response);
      })
      .catch((error) => console.log(error));
    }
  }, [userCollection]);

使用此逻辑，useEffect仅在状态为空时才更新状态。如果您希望获得连续的转售，则应创建一个变量，该变量将在发生转售时更新。

状态正在useffect（）内部更新，但组件未重新呈现

1 个答案: