Question

对于ReactJS和ES6，我是初学者，我正在编写我的第一个Web应用程序以获得基本的理解，但是我遇到了将函数从ReactJS组件传递到无状态功能组件的问题。

我得到的错误信息是：

Uncaught TypeError: Cannot read property 'click' of undefined

该组件的源代码如下：

import React, { Component } from 'react';
import firebase from 'firebase';

class SearchList extends Component {
  constructor(props) {
    super(props)
    this.state = {
      professionals: []
    }

    this.click = this.click.bind(this);
  }

  componentDidMount() {
    console.log("componentDidMount");
    const dbRef = firebase.database().ref("Professionals/");
    dbRef.on("child_added", (snapshot) => {
      const professional = snapshot.val();
      professional.key = snapshot.key;
      const newProfessionals = this.state.professionals;
      newProfessionals.push(professional);
      this.setState({
        professionals: newProfessionals
      });
    });
  }

  render() {
    return (
      <ul>
        {this.state.professionals.map(function(professional) {
          return (
            <Item
              name={professional.companyName}
              deleteHandler={this.click}
              key={professional.key} />
          )
        })}
      </ul>
    );
  }

  click(key) {
    console.log("Deleting professional with key " + key + "...");
  }
}

var Item = function(props) {
  return (
    <li>
      {props.name} <button onClick={props.deleteHandler}>x</button>
    </li>
  )
}

export default SearchList;

如果我在deleteHandler={this.click}函数中注释掉render的行，我没有收到任何警告，但是当我点击时，也没有任何反应。显然。

正如您所知，网络应用程序通过Firebase连接到实时数据库。与数据库的连接完全正常，并且数组按预期填充。

奖金问题：

将函数传递给无状态功能组件时，是否应该包含参数（在本例中为professional.key），还是无状态功能组件应该自己发送？

欢迎提示和技巧以及最佳实践。：）

如何使用ReactJS将函数传递给无状态组件？

0 个答案: