Как получить JSON данные из console.log внутри функции и применить их?

Question

Я хочу получить JSON данные, используя метод выборки, и применить их для реагирования компонента. (компонент пользовательского блока для WordPress)

Вот код, который я написал

function getCategories() {
    fetch('sample.json')
    .then((data) => data.json())
    .then((obj) => {
        console.log(obj)
    })
}

console.log result

[
 {value: 15, label: "Cat1"}
 {value: 21, label: "Cat2"}
 {value: 18, label: "Cat1"}
]

Я хочу применить "console.log" данные для компонента ниже

<Select
    value={ xxxxxxxxxxxxx ) }
    onChange={ xxxxxxxxxxxxx }
    options={  !!! I want use it HERE !!!  }
    />

Моя идея состоит в том, чтобы сделать что-то вроде этого

function getCategories() {
    ...
}

<Select
    value={ xxxxxxxxxxxxx ) }
    onChange={ xxxxxxxxxxxxx }
    options={ getCategories() }
    />

Если я сначала введу return, функция вернет объект Promise и завершится неудачно. Я просто хочу только значение Promise.

function getCategories() {
    return fetch('sample.json') // ← add return
        .then((data) => data.json())
        .then((obj) => obj
    })
}

<Select
    value={ xxxxxxxxxxxxx ) }
    onChange={ xxxxxxxxxxxxx }
    options={ getCategories() }
    />

При жестком кодировании все работает нормально

<Select
    value={ xxxxxxxxxxxxx ) }
    onChange={ xxxxxxxxxxxxx }
    options={ [
        {value: 15, label: "Cat1"}
        {value: 21, label: "Cat2"}
        {value: 18, label: "Cat1"}
    ]  }
    />

Не обязательно работать, если есть лучший способ получить JSON данных.
(это просто моя идея ..)
Надеюсь, кто-нибудь поможет мне.

Answer 1

Вы хотите получить категории в эффекте (или componentDidMount, если используете компонент класса) и сохранить результат в состоянии. В этот момент данные доступны вашему компоненту Select для использования при каждом отображении.

function CategoriesSelect() {
  const [categories, setCategories] = React.useState([]);
  React.useEffect(() => {
    fetch('sample.json')
    .then((data) => data.json())
    .then((obj) => {
        setCategories(obj)
    })
  }, [])

  return (
    <Select
      value={ xxxxxxxxxxxxx ) }
      onChange={ xxxxxxxxxxxxx }
      options={categories}
    />
  )
}

Answer 2

В идеале вы должны разделить выборку данных на рендеринг компонента.

class Component {
  constructor () {
    this.state = {};
  }

  componentDidMount () {
    fetch('config')
      .then(resp => resp.json())
      .then(data => this.setState({data}));
  }

  render () {
    {this.state.data && (
      <Select options={this.state.data} />
    )}
  }
}

Answer 3

Я думаю, вы должны использовать state для своих вариантов

const [options, setOptions] = useState([]);

function getCategories() {
    return fetch('sample.json') // ← add return
        .then((data) => data.json())
        .then((obj) => setOptions(obj))
    })
}

А затем использовать опции внутри Select

<Select
    value={ xxxxxxxxxxxxx ) }
    onChange={ xxxxxxxxxxxxx }
    options={options}
    />