ReactJS TypeError: _this3.onDismissID is not a function

Question

我正在从网站中提取与特定搜索词相关的热门新闻，显示它们，然后在每个新闻旁边添加一个关闭按钮，以便用户可以根据需要删除它们。代码是这样的：

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 不是一个函数”。为什么会这样？

Answer 1

问题

onDismissID 未在 Table 中定义，它在 App 中定义。

解决方案

看来您可能想将 onDismissID 作为 prop 传递给 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 中，从 props 解构 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>
    );
  }
}

ReactJS TypeError: _this3.onDismissID is not a function

ReactJS TypeError: _this3.onDismissID is not a function

javascript

function

this

reactjs

问题

解决方案