如何正确映射 api fetch react 的结果

Question

我已经设置好提取请求并从 API 正确检索数据。但是，当我尝试将结果映射到列表项时，收到“未处理的拒绝（TypeError）：items.map 不是函数”错误。我打算如何将 'titles' 映射到可交付成果中？

这是我当前的设置：

获取请求的输出

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

}
}

Answer 1

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].

键的所需对象

Answer 2

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

一种获取密钥的方法（如 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>)

Answer 3

你可以这样做：

    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

如何正确映射 api fetch react 的结果

How to properly map results from api fetch react

reactjs

fetch-api