Javascript 祖辈组件不将参数传递给函数

我在试图理解react如何将函数作为道具来工作时有些疑问，将它们传递给子组件。我已经看过一些教程，但目前还没有掌握我的问题

基本上，我有一个简单的组件向下传递一个列表，另一个组件使用Array.map处理列表以呈现另一个组件

基本上，我有以下几点：

App.js->Quotes->Quote

我想处理对报价组件的点击。因此，每当用户单击Quote时，我都想在APP.js上处理它

我已经尝试将引用作为一个支撑传递，并在app.js quotes组件中调用该函数，但没有成功

这就是我一直尝试的：

App.js

import React, { Component } from 'react';
import classes from './App.module.css';

import Quotes from '../components/quotes/quotes'

class App extends Component {
  state = {
    quotes: [
      { id: 1, text: "Hello There 1" },
      { id: 2, text: "Hello There 2" },
      { id: 3, text: "Hello There 3" },
      { id: 4, text: "Hello There 4" }
    ],
    clickedQuote: "none"
  }

  handleClickedQuote (id) {
    console.log(id)
    const quoteIndex = this.state.quotes.findIndex(q => q.id === id)

    this.setState({
      clickedQuote: this.state.quotes[quoteIndex].text
    })
  }

  render() {
    return (
      <div className="App">
        <div className={classes['quotes-wrapper']}>
          <Quotes clicked={this.handleClickedQuote} quotes={this.state.quotes}/>
          <p>clicked quote {this.state.clickedQuote}</p>
        </div>
      </div>
    );
  }
}

export default App;

Quotes.js

import React from 'react';
import Quote from './quote/quote'

const quotes = (props) => props.quotes.map((quote) => {
  return (
    <Quote clicked={props.clicked} text={quote.text}/>
  )
})

export default quotes

Quote.js

import React from 'react';
import classes from './quote.module.css'

const quote = (props) => {
  return (
    <div onClick={() => props.clicked(props.id)} className={classes.quote}>
      <p className={classes['quote-text']}>{props.text}</p>
    </div>
  )
}

export default quote

---

我需要在App.js函数中获取hanleClickedQuote上的id。我做错了什么？

您需要显式地将id作为道具传递。因此，在地图中的Quotes.js中， 比如：

<Quote id={quote.id} clicked={props.clicked} text={quote.text}/>

---

更新：正如@Ashkan在回答中所说的，您还需要正确绑定您的处理程序

您需要将id作为道具显式传递。因此，在地图中的Quotes.js中， 比如：

<Quote id={quote.id} clicked={props.clicked} text={quote.text}/>

---

更新：正如@Ashkan在回答中所说的，您还需要正确绑定您的处理程序

您的代码中有两个地方出错了。第一个是JS社区中的一个常见问题。我建议您深入阅读“this”关键字的用法。在App.js中，您将方法定义为函数声明

handleClickedQuote(id) {
    console.log(id)
    const quoteIndex = this.state.quotes.findIndex(q => q.id === id)

    this.setState({
        clickedQuote: this.state.quotes[quoteIndex].text
    })
}

现在，函数声明中的'this'关键字是动态设置的，这意味着在调用函数时实际上会设置'this'，因为它是一个事件处理程序，'this'的值实际上就是您的事件！你可以测试一下。但是我们希望“this”引用我们的类，这样我们就可以访问状态

有两种方法可以解决此问题，首先：

您可以在App.js类的构造函数中为“this”绑定正确的值，如下所示：

constructor(props) {
    super(props);
    this.handleClickedQuote = this.handleClickedQuote.bind(this);
}

这将使用在对象的构造步骤中使用正确“This”值的版本替换类中的方法

或者更简单，您可以使用箭头函数，因为箭头函数中的“this”关键字是按词汇设置的：

handleClickedQuote = id => {
    console.log(id);
    const quoteIndex = this.state.quotes.findIndex(q => q.id === id);

    this.setState({
        clickedQuote: this.state.quotes[quoteIndex].text
    });
}

注意：在箭头函数中，“this”的值基本上是指代码块之外的任何东西，在本例中，它是整个对象

另外，您的代码中有一个别人提到的小错误。实际上，您忘记将报价的id作为道具传递给报价组件。但这只是一个小疏忽。 重要的是要知道这个问题与React的关系要比JS本身的关系小。我的建议是深入了解JS，学习该语言的所有技巧和技巧。这将在将来为您节省很多麻烦。还要提高你的调试技巧，这样像丢失道具这样的错误就不会那么容易从裂缝中消失

---

祝您好运

您的代码中有两个地方出错了。第一个是JS社区中的一个常见问题。我建议您深入阅读“this”关键字的用法。在App.js中，您将方法定义为函数声明

handleClickedQuote(id) {
    console.log(id)
    const quoteIndex = this.state.quotes.findIndex(q => q.id === id)

    this.setState({
        clickedQuote: this.state.quotes[quoteIndex].text
    })
}

现在，函数声明中的'this'关键字是动态设置的，这意味着在调用函数时实际上会设置'this'，因为它是一个事件处理程序，'this'的值实际上就是您的事件！你可以测试一下。但是我们希望“this”引用我们的类，这样我们就可以访问状态

有两种方法可以解决此问题，首先：

您可以在App.js类的构造函数中为“this”绑定正确的值，如下所示：

constructor(props) {
    super(props);
    this.handleClickedQuote = this.handleClickedQuote.bind(this);
}

这将使用在对象的构造步骤中使用正确“This”值的版本替换类中的方法

或者更简单，您可以使用箭头函数，因为箭头函数中的“this”关键字是按词汇设置的：

handleClickedQuote = id => {
    console.log(id);
    const quoteIndex = this.state.quotes.findIndex(q => q.id === id);

    this.setState({
        clickedQuote: this.state.quotes[quoteIndex].text
    });
}

注意：在箭头函数中，“this”的值基本上是指代码块之外的任何东西，在本例中，它是整个对象

另外，您的代码中有一个别人提到的小错误。实际上，您忘记将报价的id作为道具传递给报价组件。但这只是一个小疏忽。 重要的是要知道这个问题与React的关系要比JS本身的关系小。我的建议是深入了解JS，学习该语言的所有技巧和技巧。这将在将来为您节省很多麻烦。还要提高你的调试技巧，这样像丢失道具这样的错误就不会那么容易从裂缝中消失

---

祝你好运

console.logid正常吗？\console.logid正常吗？\n我不认为这是这里的主要问题，我认为这是主要/最明显的问题。如果他们像你建议的那样正确地绑定了他们的函数，那么代码仍然不会做他们想要做的事情。即使你通过道具，代码也会抛出一个

---

异常，因为此.state未定义。只是想引导他走上正确的道路，因为根据经验，很多人在开始使用React时都会遇到这个问题。正如你所说，这个错误比需要你知道为什么“this”得到错误值的问题更明显，更容易调试。当然，两者结合起来更有用。我不认为这是这里的主要问题，我认为这是主要/最明显的问题。如果他们像你建议的那样正确地绑定了他们的函数，那么代码仍然不会做他们想要做的事情。即使您传递了prop，代码也会抛出异常，因为this.state未定义。只是想引导他走上正确的道路，因为根据经验，很多人在开始使用React时都会遇到这个问题。正如你所说的，这个错误比需要你知道为什么“this”得到错误值的问题更明显，更容易调试。当然，两者结合起来更有用。我知道你给我的第一个答案，只是忘记了这一点，认为问题不在这里。只是一个简单的问题，当我将一个在有状态组件中处理的函数传递给一个子组件时。我应该在触发引号中的函数时使用=>函数，对吗？@FilipeCosta我认为这样做没有任何不利之处。另一种方法是再次使用bind，只是这次您绑定的是参数，而不是'this'变量。就我个人而言，我更喜欢箭头功能，除非你没有使用ES6，也不支持它。我知道你给我的第一个答案，只是忘记了这一点，认为问题不是这个。只是一个简单的问题，当我将一个在有状态组件中处理的函数传递给一个子组件时。我应该在触发引号中的函数时使用=>函数，对吗？@FilipeCosta我认为这样做没有任何不利之处。另一种方法是再次使用bind，只是这次您绑定的是参数，而不是'this'变量。就我个人而言，我更喜欢箭头功能，除非您不使用ES6并且不支持它