Блог

Главная - Вопросы по программированию - Карта результатов реакции с ошибкой не является функцией?

Карта результатов реакции с ошибкой не является функцией?

#reactjs #api

#reactjs #API

Вопрос:

  • Фреймворк: реагировать
  • Тип ошибки: result.map не является функцией

Я следую по книжному пути, чтобы изучить React, я попробовал приведенный ниже код с помощью hacker news 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;

Комментарии:

1. На самом деле this.state.result является объектом, поэтому вы не можете перебирать его.

2. result переменная — это объект, а не массив. Вы должны изменить его на: Object.values(result).map((item) => ( , который создаст массив всех значений

3. @szczocik благодарит, что исправлена ошибка, но она не отображает список заголовков (присутствует в api). Чего мне не хватает?

4. @YashMarmat, какова форма item , когда вы перебираете ее?

5. @szczocik я просто использовал ее как случайную переменную, я дал ссылку на свою песочницу выше, надеюсь, это поможет решить мою проблему.

Ответ №1:

.map используется для массива, your 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;
}

Комментарии:

1. большое спасибо, это исправило ошибку, но она не отображает список заголовков (присутствует в api). Чего мне не хватает?