मैं एक वेबसाइट से किसी विशेष खोज शब्द से संबंधित शीर्ष समाचारों को खींच रहा हूं, उन्हें प्रदर्शित कर रहा हूं और फिर प्रत्येक समाचार के बगल में एक खारिज बटन जोड़ रहा हूं ताकि उपयोगकर्ता चाहें तो उन्हें हटा सकें। कोड कुछ इस तरह जाता है:

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, 09:48
यह बहुत स्पष्ट रूप से स्पष्ट है, विश्वास नहीं कर सकता कि मैंने इसे याद किया! बहुत - बहुत धन्यवाद!
 – 
Anish Mukherjee
9 अप्रैल 2021, 09:54
मैंने "onDismissID" के लिए एक वैश्विक खोज की और कोड को कई बार देखा, इससे पहले कि मैंने देखा कि आपने वास्तव में दो घटक पोस्ट किए थे, तब यह स्पष्ट था! :) कभी-कभी आपको आंखों के अतिरिक्त अपरिचित-साथ-कोड सेट की आवश्यकता होती है। अगर इस उत्तर ने आपकी समस्या का समाधान किया है तो मैं आपको इसे स्वीकृत उत्तर के रूप में चिह्नित करने के लिए आमंत्रित करता हूं, और यदि स्पष्टीकरण सहायक था तो जब आप कर सकते हैं तो अपवोट करना न भूलें। चीयर्स।
 – 
Drew Reese
9 अप्रैल 2021, 09:57