Shirt.size не обновляется должным образом

Question

В настоящее время я использую конечную точку, чтобы попасть в мою базу данных и получить изображение для меня в зависимости от того, что выбирает пользователь, все это работает нормально, но когда пользователь выбирает один цвет, ничего не происходит, затем они выбирают другой цвет и первый выбор наконец появляется, так что это похоже на обратное. Я знаю, что это, вероятно, вызвано чем-то связанным с рендерингом страницы и обновлением состояния объекта, но я не могу понять, как это исправить, вот мой текущий код.

Мое состояние:

//Keeps track of color user selects
  const [color, setColor] = useState("white");

My updateInCart, который вызывается, когда пользователь щелкает цвет:

//Updates state color of shirt being selected
  const updateColor = async (userColor, shirt) => {
    setColor(userColor);

    const shirtColorSource = await fetch(
      `http://localhost:5000/products/${shirt.product_id}/${color}`
    );
    const shirtColor = await shirtColorSource.json();
    shirt.image = shirtColor[0].image;
    console.log(shirt.image);

  };

Моя функция useEffect (), которая, как мне кажется, не работает должным образом rn:

useEffect(() => {
    updateColor("white", shirt);
    console.log("IN EFFECT");
  }, [color])

Как я отображаю изображение:

{shirt.map((shirt) => (
        <div key={shirt.product_id} className="row">
          <div className="col-md-12 col-lg-4 ml-auto">
            <img
              src={shirt.image}
              alt={shirt.name}
              className="img-responsive w-100"
            />
          </div>

Мне просто любопытно, как лучше всего точно обновить изображение для пользователя.

Изменить: забыл указать, где на самом деле цвет selected:

<div className="row justify-content-center">
                  <button
                    onClick={() => updateColor("white", shirt)}
                    className="button button5 ml-lg-4"
                  >
                    {" "}
                  </button>
                  <button
                    onClick={() => updateColor("black", shirt)}
                    className="button button5 bg-dark mr-lg-4 ml-md-5 mr-md-5"
                  >
                    {" "}
                  </button>
                </div>

Так же определяется рубашка с использованием набора продуктов из базы данных:

const { shirtName } = useParams();
  const shirt = products.filter((product) => product.name === shirtName);

Answer 1

Проблема может исходить от вашего useEffect, который не говорит всей правды о его зависимостях, и когда он должен быть выполнен:

useEffect(() => {
    updateColor(color, shirt);
    console.log("IN EFFECT");
  }, [updateColor, color, shirt])

Кстати, ваша функция updateColor не memoized, так что это проблема, если вы используете его в своем useEffect. Подумайте о том, чтобы переместить его в useEffect напрямую (если он не используется в другом месте), в противном случае объявите его с помощью useCallback.

useEffect(() => {
  const updateColor = async (...) => {
    ...
  };

  updateColor(color, shirt);
  console.log("IN EFFECT");
}, [color, shirt])

// or
const updateColor = useCallback(async (...) => {
  ...
}, []);

useEffect(() => {
  updateColor(color, shirt);
  console.log("IN EFFECT");
}, [updateColor, color, shirt])