使用 React Typescript 时，从 promise 返回的 json 值不提供节点值答案

【问题标题】：json value returned from a promise does not give node values when using React Typescript使用 React Typescript 时，从 promise 返回的 json 值不提供节点值
【发布时间】：2022-10-20 06:46:42
【问题描述】：

我的承诺返回如下所示的响应对象：

Response:
Person: Array(3)
0: {Name: 'PersonA', Data: Array(2)}
1: {Name: 'PersonB', Data: Array(3)}
2: {Name: 'PersonC', Data: Array(4)}

这是用于获取响应的函数

public personData = (): Promise<any> => {
    const personData = `http://url/get/someperson/data/personData.json`;
    return (
      fetch(personData , { method: "GET" })
        .then((response) =>
          response.json().then((response) => ({
            response,
          }))
        )
        .catch((e) => console.log(e))
    );
  };

但是，我想获取所有 Person 名称并将它们填充到下拉列表中。但是，我首先只想获取 Person name 的所有值并将它们填充到一个变量中。

要做到这一点，如果我尝试这样的事情 val 总是不明确的

const val = personData().then((personNames: any): void => {
      (personNames.Person);
});

以我有限的理解，非常感谢任何有关解决此问题的建议或指导。

提前致谢！

【问题讨论】：

你在val 函数中做什么？在then 块中？它只是一个表达你想返回它吗？ .then((personNames) => personNames.Person);
是的，我在这里要做的基本上是获取所有 Person 名称值。

标签： reactjs typescript react-native promise

【解决方案1】：

看起来您的函数名称错误。它应该是getData 而不是personData。

此外，如果您想返回分配给变量val 的值，您可以尝试：

const val = await getData();

或者，如果您仍想使用then/catch：

let val;
getData().then((personNames: any) =>
  {
    val = personNames.Person; // should assign the value there
  })

【讨论】：

【解决方案2】：

更新
抱歉，我错过了返回类型的可能性。 catch 案例只返回没有映射的 void 类型。所以我只是把值设置随后。我假设响应是列表。

let val

const getData = () => {
  const personData = `http://url/get/someperson/data/personData.json`;
  return fetch(personData, { method: 'GET' })
    .then((response) =>
      response.json().then((response) => {
        val = response.map((person: any) => person.Name)
      })
    )
    .catch((e) => {
      console.log(e);
    });
};

==============================
我更新了你的代码。您应该修改响应并将其返回。

const val = getData().then((personList: any): [] => {
  return personList.map((person: any) => person.Name);
});

OR one liner expression below

const val = getData().then((personList: any): []=>  personList.map((person: any) => person.Name);
    );

【讨论】：

似乎由于某种原因我不能在这里使用 .map() 。它给了我一个类型错误：TypeError: personList.map is not a function
我已经更新了我的答案。你能试试这个吗？

【解决方案3】：

好的，这是我必须做的才能获得人名值。

const getPersonVal = async (): Promise<void> => {
   const personVal = await getData();
   console.log(personVal.response.Person.map((personName: any) => personName.Name));
 };

【讨论】：