Как получить свойства объекта api в React

Question

Я хотел бы знать, как получить свойства объекта из json. У меня есть поддельный API:

{
    "Arreglo":[
        { "label": "Choose Wisely", "value": "Choose Wisely"},
        { "label": "Primer opción", "value": "1", "testvariable": [] },
        { "label": "Segunda opción"," value": "2" },
        { "label": "Tercer opción", "value": "3" }
    ]
}

Это мое приложение. js:

import SelectComponent from './Components/SelectComponent';
import {Arreglo} from './FakeApis/SelectOptions';

function App() {
  return (
    <div className="App">
      <SelectComponent items1 = {Arreglo}/>
    </div>
  );
}

А это моя форма и то, как я устанавливаю состояние:

export default function SelectComponent(items1) {
    console.log(items1.items1);
    const[testVar, testFunction] = useState(false);
    const [items] = React.useState(items1.items1);
<form>
    <select onChange = {handleChange}>
      {items.map(item => (
        <option
          key={item.value}
          value={item.value}
          label={item.label}
        >
          {item.label}
        </option>
      ))}
    </select>
  </form>

В этой функции я хотел бы знать, как получить "testvariable"

const handleChange = event => {

    console.log("The variable --->");
};

Надеюсь, я хорошо объяснил. С уважением!

Answer 1

Поскольку ваши данные не имеют уникального идентификатора, вы можете использовать индекс каждого элемента в массиве в качестве ориентира, который вы можете использовать в своем обработчике изменений.

Для этого сначала считывать ваши данные в какой-то кусок состояния. Хотя сейчас ваши данные имеют c статус, это хорошая практика, когда вы начинаете разговаривать с реальным API для получения данных.

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

import {Arreglo} from './FakeApis/SelectOptions';
export default function App() {

  // Read the data into state
  const [data] = React.useState(Arreglo);

  const handleChange = e => {
    // The index of the selected option
    const { selectedIndex } = e.currentTarget;

    // Grab the element at that index
    const selectedOption = data[selectedIndex];

    // You can now access any property on that element, like testVariable
    console.log(selectedOption.testvariable);
  };
  return (
    <div className="App">
      <select onChange={handleChange}>
        {data.map(item => (
          <option key={item.value} value={item.value} label={item.label}>
            {item.label}
          </option>
        ))}
      </select>
    </div>
  );
}

Answer 2

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

<select onChange = {(event) => handleChange(event, items)}>
  {items.map(item => (
    <option
      key={item.value}
      value={item.value}
      label={item.label}
    >
      {item.label}
    </option>
  ))}
</select>

И позволить вашей функции handleChange принять другой параметр:

const handleChange = (event, items) => {
// items is now available in this block and you can get testvariable here.
console.log(`The variable ${items}`);

};

Answer 3

Для доступа к testVar ваша функция handleChange должна находиться внутри функции SelectComponent, как и testVar:

export default function SelectComponent(items1) {
    const[testVar, testFunction] = useState(false);
    const [items] = React.useState(items1.items1);

    const handleChange = event => {
         // testVar can be called here
    }

<form>
    <select onChange = {handleChange}>
      {items.map(item => (
        <option
          key={item.value}
          value={item.value}
          label={item.label}
        >
          {item.label}
        </option>
      ))}
    </select>
  </form>