Question

发生的事情是我没有使用 useEffect 和 useState，当我从购物车中删除项目时，它仍然呈现更新的状态，这是因为 Redux 吗？

我是 React 的初学者，到目前为止我学到的是，当发生任何变化时，我们使用 useEffect 或 useState 来更新状态。但在这里我很困惑。

const CartScreen = ({ history, match, location }) => {
  const qty = location.search ? Number(location.search.split('=')[1]) : 1
  console.log(qty)

  const cart = useSelector((state) => state.cart)

  const { cartItems } = cart
  console.log(cart)
  console.log("Render again")

  const dispatch = useDispatch()

这是我的 removeItem 处理程序

 const removeItemHandler = (id) => {
    dispatch(cartRemoveItem(id))
  }


  
  return (
    <div className="CartScreen">
      <div className="CartItem_Container">
        {cartItems.length === 0 ? (
          <p>No item</p>
        ) : (
          cartItems.map((product) => {
            return (
              <>
                <div className="Cart_Card">
                  <div>
                    <img src={product.image} width="70px" height="70px"></img>
                  </div>
                  <div className="Cart_Breif">
                    <p className="CartProduct_Name">
                      {product.name}{' '}
                      <span className="qty">
                        <select
                          value={product.qty}
                          onChange={(e) => {
                            dispatch(
                              cartAddItem(
                                product.product,
                                Number(e.target.value)
                              )
                            )
                          }}
                        >
                          {[...Array(product.countInStock).keys()].map((x) => (
                            <option key={x + 1} value={x + 1}>
                              {x + 1}
                            </option>
                          ))}
                        </select>
                      </span>
                    </p>
                    <p className="About_Product">{product.description} </p>

                    <p className="price">
                      ${product.price}{' '}
                      <span className="removeItem" onClick={()=> removeItemHandler(product.product)}>Remove</span>
                    </p>
                  </div>
                </div>
              </>
            )
          })
        )}
      </div>

      <div className="ProceedTo_Checkout"
        onClick={() => {
          history.push('/address')
        }}
      >
        <p>Proceed To CheckOut</p>
      </div>
    </div>
  )
}

export default CartScreen

Answer 1

您的组件由于 useSelector 重新渲染。您很可能正在通过调度 cartRemoveItem 来更新商店。 useSelector 钩子将 redux 存储中的最新选择器值与之前的选择器值进行比较，如果它们不同，则强制重新渲染组件。

Answer 2

每当 state 或 props 发生变化时组件都会重新渲染，如果您使用 useSelector 钩子然后在特定状态上，那么您的组件将跟踪该状态的任何变化并在它发生变化时重新渲染

组件渲染时甚至不使用 useEffect 和 useState

2 个答案: