Я беру самые популярные новости, связанные с определенным поисковым запросом, с веб-сайта, отображаю их, а затем добавляю кнопку отклонения рядом с каждой новостью, чтобы пользователь мог удалить их, если захочет. Код выглядит примерно так:

import React, { Component } from "react";

const PATH_BASE = "https://hn.algolia.com/api/v1";
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(props) {
    super(props);
    this.state = {
      results: null,
      searchTerm: DEFAULT_QUERY
    };
    this.setTopSearchStories = this.setTopSearchStories.bind(this);
    this.onDismissID = this.onDismissID.bind(this);
  }
  setTopSearchStories(results) {
    this.setState({ results });
  }
  onDismissID(id) {
    const updatedHits = this.state.results.hits.filter(
      (item) => item.objectID !== id
    );
    this.setState({
      result: { ...this.state.results, hits: updatedHits }
    });
  }
  componentDidMount() {
    const { searchTerm } = this.state;
    fetch(`${PATH_BASE}${PATH_SEARCH}?${PARAM_SEARCH}${searchTerm}`)
      .then((response) => response.json())
      .then((results) => this.setTopSearchStories(results))
      .catch((error) => error);
  }
  render() {
    const { results, searchTerm } = this.state;
    if (!results) return null;
    const lists = results.hits;
    return (
      <div className="page">
        <Table list={lists} />
      </div>
    );
  }
}

class Table extends Component {
  render() {
    const { list } = this.props;
    return (
      <div>
        {list.map((item) => (
          <div key={item.objectID} className="table">
            <span>
              <a href={item.url}>{item.title}</a>
            </span>
            <span>{item.author}</span>
            <span>
              <button
                onClick={() => this.onDismissID(item.objectID)}
                type="button"
              >
                Dismiss
              </button>
            </span>
          </div>
        ))}
      </div>
    );
  }
}

export default App;

Он отображается нормально, но когда я нажимаю кнопку "Отклонить", код прерывается с сообщением об ошибке "_this3.onDismissID не является функцией". Почему это происходит?

1
Anish Mukherjee 9 Апр 2021 в 09:42

1 ответ

Лучший ответ

Проблема

onDismissID не определен в Table, он определен в App.

Решение

Кажется, вы можете передать onDismissID в качестве опоры для Table.

В App передайте опору onDismissID компоненту Table.

...

render() {
  const { results, searchTerm } = this.state;
  if (!results) return null;
  const lists = results.hits;
  return (
    <div className="page">
      <Table list={lists} onDismissID={this.onDismissID} /> // pass this.onDismissID
    </div>
  );
}

В Table удалите структуру onDismissID из реквизита и прикрепите к обработчику нажатия кнопки.

class Table extends Component {
  render() {
    const { list, onDismissID } = this.props; // destructure onDismissID
    return (
      <div>
        {list.map((item) => (
          <div key={item.objectID} className="table">
            <span>
              <a href={item.url}>{item.title}</a>
            </span>
            <span>{item.author}</span>
            <span>
              <button
                onClick={() => onDismissID(item.objectID)} // attach onDismissID
                type="button"
              >
                Dismiss
              </button>
            </span>
          </div>
        ))}
      </div>
    );
  }
}
0
Drew Reese 9 Апр 2021 в 06:48