祖父母组件未将参数传递给函数

Question

我对尝试理解react如何与作为props的功能一起工作，并将它们传递给子组件感到怀疑。我已经看过一些教程，但目前还不了解我的问题。基本上，我有一个简单的组件可以向下传递列表，而其他组件则可以使用Array.map处理该列表以呈现另一个组件。基本上我有以下几点：App.js->报价->报价。我想处理对Quote组件的单击。因此，每当用户单击Quote时，我都希望在APP.js上处理它。我已经尝试过将引用作为道具传递下来，并在app.js引号组件中调用该函数，但这没有用。这是我到目前为止尝试过的：App.jsimport 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.jsimport 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 quotesQuote.jsimport 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。我究竟做错了什么？

Answer 1

好了，在您的代码中有两件事是非常错误的。第一个是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作为道具传递给Quote组件。但这只是一个小小的疏忽。重要的是要知道这个问题与React的关系比JS本身的关系少。我的建议是对JS进行更深入的学习，并学习该语言的所有怪癖和技术知识。它将为您节省很多麻烦。还可以利用您的调试技能，这样，像丢失道具这样的错误就不会那么容易地掉入裂缝。