反应-错误结果图不是函数吗？

debugcn 发表于 Dev

亚什·马马特（Yash Marmat）

框架：React
错误类型：result.map不是函数

我正在阅读《学习React之书》一书，我尝试了使用骇客新闻API的以下代码，该代码效果很好，但不适用于该API。我不知道为什么会出现此错误，请帮忙。

链接到我的沙箱-> https://codesandbox.io/s/react-setup-forked-q0hti?file=/src/App.js

import React, { Component } from "react";
    
// API chunks
const PATH_BASE = "https://jsonplaceholder.typicode.com/todos";
const PATH_SEARCH = "/search";
const PARAM_SEARCH = "query=";
const DEFAULT_QUERY = "redux";
    
//const url = `${PATH_BASE}${PATH_SEARCH}?${PARAM_SEARCH}${DEFAULT_QUERY}`;
//console.log(url);
    
class App extends Component {
  constructor() {
    super();
    this.state = {
      result: null
    };
    this.hitStories = this.hitStories.bind(this);
  }
   
  // handling the local state value
  hitStories(result) {
    this.setState({
      result
    });
  }
    
  // lifecycle method
  // Note: componenetDidMount runs after the render method
  componentDidMount() {
    fetch(`${PATH_BASE}${PATH_SEARCH}?${PARAM_SEARCH}${DEFAULT_QUERY}`)
      .then((response) => response.json())
      .then((json_result) => this.hitStories(json_result))
      .catch((error) => error);
  }

  render() {
    console.log(this.state)
    const { result } = this.state;

    if (!result) {
      return null;
    }
    
    return (
      <div>
        <h2>Fetch API in React</h2>
        {result.map((
          item 
        ) => (
         <div>
           {item.title}
          </div>
        ))}
      </div>
    );
  }
}
    
export default App;

臭氧

.map用于数组，您result不是数组而是对象。尝试这个：

render() {
  const { result } = this.state;

  return result ? (
    <div>
      <h2>Fetch API in React</h2>
      { Object.values(result).map((item) => (
        <div>{item.title}</div>
      ))
      }
    </div>
  ): null;
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。