获取 Javascript 动态 Object 属性值时出现问题

Question

我正在运行 React Material-UI 自动完成组件，并且正在努力读取 handleSelect function 中的 Javascript Object 属性。

我可以获得 townname 值，尽管这不是 React 方式：

var selectedValue = document.getElementById('combo-box-demo').value;

我在尝试获取 Javascript Object 的相应 townid 属性值时遇到问题。

我觉得我已经尝试了所有明显的东西，例如 Object.property 和 Object["property"]，但没有一个会编译......它们都给出了 TypeError: Cannot convert undefined or null to object。

但是，我在谷歌浏览器控制台window可以看到数据。

谁能提出解决方案？ 提前谢谢了。

我的代码：

[/* eslint-disable no-use-before-define */
import React from 'react';
import TextField from '@material-ui/core/TextField';
import Autocomplete from '@material-ui/lab/Autocomplete';
import axios from 'axios';   // Asynchronous communication with Server

export default function Autocomplete_ComboBoxDemo(props) {

  var url_orig = props.data.url;

  const loading = true;
  const \[responseData, setResponseData\] = React.useState(\[\]);

  var data = \[\];

  React.useEffect(() => {
    let active = true;
 
    if (!loading) {
      return undefined;
    }  // if
  })  // React.useEffect()

  const handleChange = (event) => {

    // Replace <event.target.value>
    var url = url_orig.replace("<event.target.value>", event.target.value)

    axios.get(url)
      .then((response) => {

      data = response.data.data\[props.data.userSelectedValue\];  // OK

      setResponseData(data)
      })  // .then((response)
  }

  const handleSelect = (event) => {
    console.log("Entered handleSelect")

    var selectedValue = document.getElementById('combo-box-demo').value;

    console.log("selectedValue=", selectedValue)

    console.log("responseData=", responseData)

    var dataIndex = responseData.findIndex(x => x.townname === selectedValue);
    console.log("dataIndex=", dataIndex)
   
    var selectedID = responseData\[dataIndex\];

    console.log("selectedID=", selectedID)
    console.log("typeof(selectedID)=", typeof(selectedID))

    console.log("responseData\[dataIndex\]=", responseData\[dataIndex\])
  }

  return (
    <Autocomplete
      id="combo-box-demo"

      options={responseData}

      getOptionLabel={(responseData) => responseData\[props.data.userSelectedValue\]}

      style={{ width: 300 }}

      renderInput={(params) => <TextField {...params} label={props.data.TextFieldlabel} onChange={handleChange} onSelect={handleSelect}/>

      }
    />
  );
}][1]

Answer 1

使用 onChange 道具并在其中设置一个方法，您将获得 val 参数中的值

<Autocomplete
  id="combo-box-demo"

  options={responseData}
  onChange={(e, val) => updateValue(e, val)}
  getOptionLabel={(responseData) => responseData\[props.data.userSelectedValue\]}

  style={{ width: 300 }}

  renderInput={(params) => <TextField {...params} label={props.data.TextFieldlabel} onChange={handleChange} onSelect={handleSelect}/>

  }
/>

声明一个方法

const updateValue=(e, val)=>{
  console.log(e.taget.value);
  console.log(val);
}

在第一个控制台结果中，你得到一个 label，在第二个控制台中你得到你想要的结果