Question

使用 React useState 如何访问从 fetch API 返回的数组的键值

2020-06-13

191

javascript reactjs jsx

使用 React，如何访问使用 useState 设置的获取返回的数组的键值（在此特定情况下为 phone_id ）？

const [ contactData, setContactData ] = useState([]);
...fetch
setContactData(body)

然后，如果我 console.log(contactData) ，则响应如下：

ContactsForPhone: Array(1)
  0:
    Phone: {contact_id: 1, phone_id: "1234567890"}
    phone_id: "1234567890"
    __proto__: Object
    length: 1
    __proto__: Array(0)
contact_id: 1
first_name: "first"
last_name: "last"

尝试在 return() 的 html 中显示数据时，可以访问 {contactData.first_name ，但如何访问 phone_id ？

最初尝试使用 {contactData.ContactsForPhone[0].phone_id ，但收到错误 TypeError: Cannot read property '0' of undefined 。

Answer 1

最初您的 contactData 是一个空数组，因此 contactData.ContactsForPhone 将未定义 ==> 您收到错误。
您需要在访问 ContactsForPhone[0] 之前进行检查

{contactData && contactData.ContactsForPhone && contactData.ContactsForPhone[0] ? contactData.ContactsForPhone[0].phone_id : ""}

更多信息：您从 api 请求获得的数据实际上是一个对象，获取它后，您调用 setContactData(body) 使 contactData 成为一个对象。 contactData 实际上存储了一个对象，但您最初将其定义为一个数组，这会让您或阅读代码的人感到困惑。 ==> 最好将其定义为 const [ contactData, setContactData ] = useState(null); 或 const [ contactData, setContactData ] = useState({});

Answer 2

最初在获取数据之前， contactData 将为空数组。

因此，集合中不存在 ContactsForPhone 这样的属性。

更好的方法。

let phoneId;
if(contactData.ContactsForPhone.length > 0){ //add check for length check
     phoneId = contactData.ContactsForPhone[0].phone_id;
}

Answer 3

参考 RIYAJ KHAN 的另一位专家的回答，我认为三元运算符可以在 html 方面提供帮助：

{ ( contactData && contactData.ContactsForPhone && contactData.ContactsForPhone.length > 0 )  ? contactData.ContactsForPhone[0].phone_id : ''}