如何在反应中获取 api 对象属性

Posted 2023-02-22

【中文标题】如何在反应中获取 api 对象属性

【英文标题】：How do I get api object properties in react

【发布时间】：2020-10-06 06:30:58

【问题描述】：

我想知道如何从 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" 
    ]

这是我的 App.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>

在这个函数中我想知道如何获取“测试变量”

const handleChange = event => 

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

希望我能很好地解释自己。 问候！

【参考方案1】：

由于您的数据没有任何唯一标识 ID，因此您可以使用数组中每个项目的索引作为您可以在更改处理程序中使用的参考点。

为此，首先将您的数据读入某种状态。虽然您的数据现在是静态的，但当您开始使用实际 API 获取数据时，这是一个很好的做法。

一旦你的组件中有可用的数据（你可以将它抽象回一个单独的选择组件，我只是做了一个文件以便于理解），你可以使用 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>
  );

【讨论】：

非常感谢它对我帮助很大，以这种方式使用它会更好（每个对象没有 id），还是我应该期望在真正的 API 中有一个 id？

我已经看到了很多不同的方式，我只会查看您从 API 返回的数据并从那里进行判断调用。主要的是您不想依赖可能更改或重复的数据。

【参考方案2】：

要访问 testVar，您的 handleChange 函数必须像 testVar 一样位于 SelectComponent 函数中：

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>

【参考方案3】：

为了解决您的问题并访问您的数据，您可以做的是将您的选择标签替换为以下内容：

<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`);

;