组件正在渲染，甚至没有使用 useEffect 和 useState答案

【问题标题】：Component is rendering without even use of useEffect and useState组件正在渲染，甚至没有使用 useEffect 和 useState
【发布时间】：2021-06-18 05:51:36
【问题描述】：

当我从购物车中删除商品时，我没有使用 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

【问题讨论】：

你的购物车状态在redux中改变了，useSelector更新了购物车状态。

标签： reactjs react-redux use-effect use-state

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

【讨论】：