Блог

Я пытаюсь динамически обновлять свои данные только на интерфейсе. У меня есть список объектов, и я сопоставляю их.

Чтобы быть более конкретным, у меня есть несколько стульев, так как мои продукты и разные стулья имеют разные цветовые варианты.

Если я нажму на стул № 1, он будет выбран и будут показаны варианты стульев, это должно быть изменено при нажатии на стул № 2.

  const ProductsData = Object.values(products).map((data) => {
        return (
            <>
                <div className="box" onMouseEnter={() => setSelectedData(data)}>
                    <img src={data.image} />
                        <Row>
                            <h1>{data.name}</h1>
                        </Row>
                    </div>
            </>
        );
    });
 

И данные выбранного председателя:

 <div className="container">
     {ProductsData}
</div>
 

и показаны различные варианты цветов стульев

  {selectedData ? ( 

   {selectedData.name}

   {selectedColor amp;amp; <img src={selectedColor.image} alt="chair" />}

          {Object.values(selectedData.chair.colors).map((val) => {
               return <div onClick={() => setSelectedColor(val)}>{val.name}</div>;
          })}
)}
 

Здесь создана песочница для более легкого понимания: https://codesandbox.io/s/friendly-meninsky-ypjmr?file=/src/App.js:3483-3708

Проблемы, которые необходимо решить:

1. При нажатии на ОДНО должно отображаться изображение по умолчанию, прямо сейчас пользователь должен нажать на вариант цвета, чтобы отобразить изображение. -> При нажатии на ДВА изображение должно обновляться изображением ДВУХ по умолчанию, прямо сейчас изображение все еще остается от ОДНОГО до тех пор, пока не будет нажат цветовой вариант ДВУХ.
2. Таким образом listItemsInCart() , оба варианта ОДИН и ДВА имеют одинаковое изображение, хотя каждый из вариантов должен иметь свое собственное изображение выбранных цветовых вариантов.

Возможно ли достичь этого, разделяя одно состояние?

  const [selectedData, setSelectedData] = React.useState();
 const [selectedColor, setSelectedColor] = React.useState();
 

Чтобы выбрать цвет по умолчанию при выборе элемента, измените обработчик onClick следующим образом:

 onClick={() => {
  setSelectedData(data);
  setSelectedColor(Object.values(data.chair.colors)[0]);
}
 

В идеале цвета должны быть массивом, так как каждый элемент будет иметь одинаковую структуру, тогда это будет:

 setSelectedColor(data.chair.colors[0]);