React中点击两次才更新useState值的问题求助

你的问题核心在于React状态更新的异步特性以及状态更新逻辑的写法：

1. setState的异步性：调用setSelectedItems后立刻console.log(selectedItems)，打印的是更新前的旧状态，并非最新值，这会造成“首次点击没生效”的误解，但实际上状态已经在异步更新了。
2. 依赖旧状态的更新逻辑有问题：直接用[...selectedItems, selectedItem]生成新状态时，若状态更新是批量触发的，可能会获取到过期的selectedItems值，导致首次更新不符合预期。

修复方案 #

修改handleClick函数，采用函数式更新的方式，确保每次都基于最新的前状态生成新状态：

const [selectedItems, setSelectedItems] = useState([]);

const handleClick = (e, selectedItem) => {
  // 用函数式更新，prev接收最新的前状态
  setSelectedItems(prev => [...prev, selectedItem]);
};

// 可选：监听状态变化查看最新值
useEffect(() => {
  console.log(selectedItems);
}, [selectedItems]);

额外优化：避免变量覆盖 #

你代码中嵌套map的变量命名重复（内外层都用item），容易导致逻辑混淆，建议修改内层变量名：

{recipes.reduce(reduceRecipes, []).map((carouselGroup, index) => (
  <Carousel.Item key={carouselGroup._id}>
    <div className="d-flex justify-content-center">
      <Row>
        {carouselGroup.map((recipe, index) => {
          return (
            <Col sm>
              <Card key={recipe._id} style={{ width: "18rem" }}>
                <Card.Img variant="top" src={recipe.photo_location} />
                <Card.Body>
                  <div className="title-container">
                    <Card.Title>{recipe.name}</Card.Title>
                    <p><FcAlarmClock/> {recipe.prep_time + recipe.cook_time} minutes</p>
                  </div>
                  <Button variant='warning' onClick={(e) => handleClick(e, recipe)}>Add to Menu</Button>
                </Card.Body>
              </Card>
            </Col>
          );
        })}
      </Row>
    </div>
  </Carousel.Item>
))}

内容的提问来源于stack exchange，提问作者Abdelrhmann02