Question

每次用户提交搜索时，我的图像组件都会显示带有红心的图像。如果单击图像，心脏会改变颜色，并且在用户提交新搜索时应重置为白色（默认颜色）。出于某种原因，即使在搜索之后点击颜色仍然存在。我对反应状态有什么不了解？这不仅仅是在下一次渲染中发生变化的东西。在我手动更改之前，它一直保持这样。

const Image = ({image, toggleFav, initialIcon, initialAlt}) => {
  const [fav, setFav] = useState(false);
  const [heartIcon, setHeartIcon] = useState(initialIcon)
  const [heartAlt, setHeartAlt] = useState(initialAlt)
  const handleClick = () => {
    setFav(fav => !fav);
    toggleFav(image.id, fav);
    if (heartIcon == "whiteHeartIcon") {
      setHeartIcon("redHeartIcon")
    }
    else {
      setHeartIcon("whiteHeartIcon")
    }
    if (heartAlt == "white heart icon") {
      setHeartAlt("red heart icon")
    }
    else {
      setHeartAlt("white heart icon")
    }
  };
  return (
    <Grid item xs={4} key={image.id}>
      <div className={`${fav ? "fav" : ""}`} onClick={handleClick}>
        <div className="imgBox">
          <img src={image.url} className="image"/>
          <Heart icon={heartIcon} alt={heartAlt} className="heart"/>
        </div>
      </div>
    </Grid>
  );
}

这是组件的句柄提交函数：

const searchAllImages = async (keyword) => {
    const response = await searchImages(keyword);
    const imageObjects = response.data.message.map((link, index) => {
      let newImage = {
        url: link,
        id: link,
        fav: false
      };
      return newImage;
    });
    dispatch({type: 'SET_IMAGES', payload: imageObjects});
  };

我通过 redux 存储渲染图像，每次完成新搜索时它都会替换图像状态。状态驻留在 Store.js 中，其中图像最初设置为空列表。 dispatch 方法来自 Reducer.js，其中定义了该方法。

case "SET_IMAGES":
      return {
        ...state,
        images: action.payload
      }

Answer 1

您是否尝试过将初始图像最初设置为不同的变量，然后使用 useEffect 检查图像变量是否发生变化，如果发生变化，则将值分配给上述变量。反正更像是使用 useEffect 或 useCallback 进行操作。

即使替换数据后组件状态也不会改变

1 个答案: