useEffect：状态更新后不渲染答案

【问题标题】：useEffect: not rendering after update of stateuseEffect：状态更新后不渲染
【发布时间】：2021-04-24 19:22:09
【问题描述】：

我有一个项目列表（我通过 GET 调用获取项目 - 我没有在此处添加它，因为我认为它无关紧要）。当我删除一个项目时，列表应该被更新/重新渲染。

为此，我使用带有第二个参数 (productData) 的 useEffect-hook。

问题：
我必须手动刷新页面才能看到新的项目列表。我不明白为什么：我将 useEffect 与第二个参数一起使用。有人可以指出我正确的方向有什么问题吗？非常感谢！

这是我的代码：

export default function MemberSavedProducts() {

  const [productData, setProductData] = useState([]); 
  const [successMessage, setSuccessMessage] = useState();
  const [errorMessage, setErrorMessage] = useState();

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

  const deleteProduct = async(prod) => {
    try {
      if (window.confirm("Are you sure you want to delete this product?")) {
        const {
          data
        } = await fetchContext.authAxios.delete(
          `savedProducts/${prod}`
        );
        setProductData(
          productData.filter((prod) => prod !== data.deletedItem.Id)
        );
        setSuccessMessage(data.message);
      }
    } catch (err) {
      const {
        data
      } = err.response;
      setErrorMessage(data.message);
    }
  };

  return (
      <CardLarge>
        <div className={styles.productWrapper}>
          {successMessage && <SuccessMessage text={successMessage} />}
          {errorMessage && <ErrorMessage text={errorMessage} />}

          {productData.map((prod) => {
            return (
              <div
                key={prod.id}
              >
                <ProductItem
                  prod={prod}
                  onClick={() => {
                     getInfo(prod.information);
                  }}
                 />
                 <button
                   onClick={() => {deleteProduct(prod.Id)}}
                 >
                   Delete
                 </button>
               </div>
             );
           })}
         </div>
      </CardLarge>

); }

【问题讨论】：

您确定过滤功能有效吗？似乎刷新有效，因为 GET 响应返回正确的数组。我认为应该是productData.filter((prod) => prod.Id !== data.deletedItem.Id)); 或者使用传递的参数而不是响应可能像这样productData.filter((p) => p.Id !== prod));
非常感谢您查看代码！ @Stutje：你是对的。这是过滤器的问题，而不是 useEffect。多么愚蠢的错误……花了我几个小时！现在它正在工作..再次感谢！
很高兴我能帮上忙 :)

标签： javascript reactjs use-effect

【解决方案1】：

在 cmets 中讨论过这个问题，为了完整性发布这个答案。

您确定过滤功能有效吗？似乎刷新有效，因为 GET 响应返回正确的数组。我认为应该是productData.filter((prod) => prod.Id !== data.deletedItem.Id));。因为在您的代码中，您将一个对象与一个字符串进行比较。

或者你可以使用传递的参数prod而不是响应可能像这样productData.filter((p) => p.Id !== prod));

还有一个小说明：useEffect 不会导致重新渲染，更改状态会触发重新渲染。 useEffect 只是一个侦听器/回调，在声明的依赖项更改时触发。

【讨论】：