Блог

Я пытаюсь создать веб-сайт электронной коммерции, используя React, Graphql, Apollo. Некоторые продукты, которые извлекаются из API, имеют набор атрибутов (размер, цвет и т.д.). Я создал радиовходы для каждого значения атрибута. В конечном счете, я хочу получить только 1 значение от каждого атрибута (1 от размера, 1 от цвета и т. Д.) И перевести их в состояние массива, которое я создал.

Я был бы очень признателен за любую помощь, заранее спасибо!

Вот код

 import React, { Component } from 'react'; import styled from 'styled-components';  export default class Attributes extends Component {  state = {  attributeName: '',  attributeList: [],  };  componentDidMount() {  if (this.props.attributes) {  this.setState({  attributeName: this.props.attributes[0].name,  });  }  }   render() {  const { attributes } = this.props;  const { attributeName, attributeList } = this.state;   const selectHandler = (e) =gt; {  this.setState({ attributeName: e.target.value });  };  const addToAttributeListHandler = (e) =gt; {  this.setState((curState) =gt; {  return {  attributeList: [...curState.attributeList, e.target.value],  };  });  };   const attributeItems =  attributes amp;amp; attributes.find((item) =gt; item.name === attributeName);   console.log(attributeList);   return (  lt;Containergt;  {attributes amp;amp; attributeItems amp;amp; (  lt;gt;  lt;select defaultValue={attributeName} onChange={selectHandler}gt;  {attributes.map((attributeName) =gt; (  lt;gt;  lt;option key={attributeName.id} value={attributeName.name}gt;  {attributeName.name}  lt;/optiongt;  lt;/gt;  ))}  lt;/selectgt;  lt;fieldset onChange={addToAttributeListHandler}gt;  {attributeItems.items.map((item) =gt; (  lt;div key={item.id}gt;  lt;input  type="radio"  value={item.value}  name={attributeName}  id={item.id}  /gt;  lt;label htmlFor={item.value}gt;{item.value}lt;/labelgt;  lt;/divgt;  ))}  lt;/fieldsetgt;  lt;/gt;  )}  lt;/Containergt;  );  } }  const Container = styled.div``;