Как реализовать раскрывающийся список реагирующих виджетов в reactjs

Question

Я пытаюсь добавить выпадающий список в моем reactjs проекте. Мои данные поступают из API, который выглядит примерно так.

В раскрывающемся списке я должен отобразить colours и sizeType в раскрывающемся списке.

Я пытался сделать это, но это не работает.

  const data = [props.data];
  return (
    <Grid xs={12} className="sort" container>
      <DropdownList
        style={{ height: "auto" }}
        placeholder={props.title}
        className="drop-down"
        data={data}
      />
    </Grid>

Answer 1

Если мы предположим, что props.data вы предоставили фактические данные, которые вы получили от API.

Уничтожение наших фактических данных

Поскольку фактические данные - это сам объект, мы можем обращаться к свойствам colours и sizeType внутри них так же, как это:

const colours = data.colours;
const sizeType = data.sizeType;

Создание массива наших деструктурированных данных

Поскольку colours и sizeType сами по себе являются строками, мы должны создать массив из них, чтобы передать их DropdownList в качестве данных, поэтому мы можем сделать это как ниже:

const coloursArray = data.colours.split(',');
const sizeTypeArray = data.sizeType.split(',');

ПРИМЕЧАНИЕ: Имейте в виду, что каждый массив получил свои уникальные индексы, поэтому нам не нужно создавать уникальный идентификатор самостоятельно, и DropdownList будет использовать его как это уникальный идентификатор для различий, но для использования передового опыта мы должны предоставить уникальные идентификаторы для каждого раскрывающегося списка и данных, используя UUID, чтобы сделать различие намного более четким. Для получения дополнительной информации о UUID, вы можете прочитать этот пост .

ПРИМЕЧАНИЕ 2: Поскольку требуемый строковый атрибут разделяется на ,, мы можем просто используйте символ запятой в качестве ввода функции split. Вы можете узнать больше о функции разделения здесь .

---

Окончательный результат

Так что это будет окончательный возврат, который вы обеспечили для своего компонента:

return (
    <Grid xs={12} className="sort" container>
      <DropdownList
        style={{ height: "auto" }}
        placeholder={props.title} //Title for colours dropdown
        className="drop-down"
        data={coloursArray}
      />
    </Grid>
    <Grid xs={12} className="sort" container>
      <DropdownList
        style={{ height: "auto" }}
        placeholder={props.title} //Title for colours dropdown
        className="drop-down"
        data={sizeTypeArray}
      />
    </Grid>
)

Answer 2

Сначала вы должны разделить строку цветов на массив

const colorsArray = data.colors.split(',');

, а затем передать ее как атрибут данных

  return (
    <Grid xs={12} className="sort" container>
      <DropdownList
        style={{ height: "auto" }}
        placeholder={props.title}
        className="drop-down"
        data={colorsArray}
      />
    </Grid>