Question

我有一个项目列表（我通过 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>

); }

Answer 1

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

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

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

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

useEffect：状态更新后不渲染

1 个答案: