如何正确映射来自 api fetch react 的结果答案

【问题标题】：How to properly map results from api fetch react如何正确映射来自 api fetch react 的结果
【发布时间】：2020-10-28 05:38:52
【问题描述】：

我已经设置好获取请求并正确地从 API 检索数据。但是，当我尝试将结果映射到列表项时，我收到了“Unhandled Rejection (TypeError): items.map is not a function”错误。我的意思是如何将“标题”映射到可交付成果中？

这是我目前的设置：

获取请求的输出

{1: {…}, 2: {…}, 3: {…}, 4: {…}, 6: {…}, 7: {…}, 8: {…}, 9: {…}}
1:
  entries: "598"
  id: "1"
  title: "Newsletter SignUp"
  __proto__: Object
2: {id: "2", title: "Contact Page Form", entries: "663"}
3: {id: "3", title: "Sidebar RFI", entries: "114"}
4: {id: "4", title: "White Paper Email Sign-Up", entries: "72"}
6: {id: "6", title: "White Paper Registration", entries: "84"}
7: {id: "7", title: "Services RFI", entries: "766"}
__proto__: Object

从 api 获取/渲染的代码

componentDidMount() {
 var myHeaders = new Headers();
 myHeaders.append("Content-Type", "application/json");
 myHeaders.append("Authorization", "Basic XXX");

  var requestOptions = {
    method: 'GET',
    headers: myHeaders,
    redirect: 'follow'
  };

  fetch("https://www.example.com/wp-json/gf/v2/forms", requestOptions)
    .then(res => res.json())
    .then(
      (result) => {
        console.log(result);
        this.setState({
          isLoaded: true,
          items: result
        });
      },
      (error) => {
        this.setState({
          isLoaded: true,
          error
        });
      }
    )
}



render() {
const { error,
  isLoaded,
  items
} = this.state;

if (error) {

  return <div>Error: {error.message}</div>;

} else if (!isLoaded) {

  return <div>Loading...</div>;

} else {

  return (
    <div>
      <div>
        {items.map(item => (
          <li key={item.title}>
            {item.title}
          </li>
        ))}
      </div>
    </div>
  );

}
}

【问题讨论】：

看起来响应是对象的对象...您无法映射对象...
@SakoBu，那么有可能以不同的方式解决这个问题吗？
项目：Object.values（结果）
Object.values 将返回一个对象数组...

标签： reactjs fetch-api

【解决方案1】：

你可以这样做：

    export default class Example extends React.Component {
     // Your state will look something like this after the get request
      state = {
        result: {
          1: { id: "1", title: "Contact Page Form", entries: "663" },
          2: { id: "2", title: "Contact Page Form", entries: "663" },
          3: { id: "3", title: "Sidebar RFI", entries: "114" },
          4: { id: "4", title: "White Paper Email Sign-Up", entries: "72" },
          6: { id: "6", title: "White Paper Registration", entries: "84" },
          7: { id: "7", title: "Services RFI", entries: "766" }
        }
      };
    
      renderResult = () => {
        const res = Object.values(this.state.result);
        return res.map(item => <div>{item.title}</div>);
      };
    
      render() {
        return <div>{this.renderResult()}</div>;
      }
    }

现场演示：https://codesandbox.io/s/polished-river-kueyq?file=/src/App.js:51-738

【讨论】：

【解决方案2】：

这是一个关于 javascript 基础的问题，而不是 react 或 apis。问题实际上是如何映射一个以对象为值的对象。

一种方法是获取密钥（如 SomoKRoceS 节目）是Object.keys：

Object.keys(obj).map(key => (
          <li key={obj[key].title}>
            {items[obj].title}
          </li>
        ))

另一种方式是"for in"：

for (const key in obj) {
  if (obj.hasOwnProperty(prop)) {
    list.push(<li key={obj[key].title}>{items[obj].title}</li>)
  } 
}

return list;

另一种方式是Object.values:

Object.values(obj).map(val => <li key={val.title}>{val.title}</li>)

【讨论】：

【解决方案3】：

map() 是一种应用于数组的方法。您可以创建一个包含对象所有索引的数组，然后对其进行映射 - 对于每个元素，从原始对象中获取该键的值。

所以你可以这样做：

  return (
    <div>
      <div>
        {Object.keys(items).map(item => (
          <li key={items[item].title}>
            {items[item].title}
          </li>
        ))}
      </div>
    </div>
  );

Object.keys(items) 将在items 中创建一个包含所有键的数组[1,2,3,...]，然后map 将遍历该数组，您将能够使用items[item] 使用该键访问所需的对象.

【讨论】：