Question

此刻，我坚持要创建要添加到购物篮中的不同产品的商店。当我想将cardList的状态传递到购物篮组件以将信息从“购物篮为空”更改为显示信息时，会出现问题。

下面，我将我的主钩子组件粘贴到包含所有功能的购物篮组件中。

购物篮组件：

import React from 'react'

const Basket = (props) => {

return (
    <div>
        {props.cardItems.length === 0 ? "Basket is empty" : <div> You have {props.cardItems.length} products in basket!</div>}
    </div>
)

}

export default Basket;

主要组件：

    function 
  const [cardItems, setCardItems] = useState([]);
  const price = 2.50;

  useEffect(() => {
    fetch(URL, {
      method: 'GET',
      headers: {
        Accept: "application/json",
      }
    }).then(res => res.json())
      .then(json => (setBeers(json), setFilteredBeers(json))
      );
  }, [])


  function handleMatches(toMatch) {...
  }

  const displayFilterBeers = event => {...
  }

  const handleRemoveCard = () => {...

  }

  const handleAddToBasket = (event, beer) => {
    setCardItems(state => {
      let beerAlreadyInBasket = false;
      cardItems.forEach(item => {
        if (item.id === beer.id) {
          beerAlreadyInBasket = true;
          item.count++;
        };
      });
      if (!beerAlreadyInBasket) {
        cardItems.push({ ...beer, count: 1 })
      }
      localStorage.setItem('baketItems', JSON.stringify(cardItems));
      console.log('cardItems: ', cardItems, cardItems.length);
      return cardItems;
    })
  }

  return (
    <div className="App">
      <div className='search'>
        <input type='text' placeholder='search beer...' onChange={displayFilterBeers} />
      </div>
      <BeerList BeersList={filteredBeers} price={price} handleAddToBasket={handleAddToBasket} />
      <Basket cardItems={cardItems}/>
    </div>
  );
}

export default App;

我看到一个示例，该示例在没有React钩子的情况下在篮子组件中使用了const {cartItems} = this.props;。但是我不知道如何使用钩子来实现类似的目的。

Answer 1

我认为您面临的问题与this issue有关。

因此，在将数组或列表作为状态处理时，如果未将状态值设置为新实例，则react不会重新呈现。从高层比较中假设状态未更改。因此它可以避免重新渲染。

从我发现的问题this solution优于其他问题-

const handleAddToBasket = (event, beer) => {
  const nextState = [...cardItems, beer] // this will create a new array, thus will ensure a re-render
  // do other stuffs
  setCardItems(nextState);
 };

如何为每次点击将反应挂钩状态传递给另一个组件

1 个答案: