Javascript 在REACT中的两个功能之间传输信息

我正在用React和Firebase创建我的第一个应用程序，我想在两个函数之间传输数据，并将这些数据保存到我的Firebase中。但是我不能选择好的信息

这是我的代码：

import React  from 'react';
import withAuthorization from './withAuthorization';
import * as firebase from 'firebase';
import { config, database, db, auth, itembase, } from 
'../firebase/firebase';


class Catalogue extends React.Component {
  constructor(){
   super();
    this.state = {
    catalogue: []
    };
}

//Item from  Firebase
  componentDidMount() {
  database.on('value', snapshot => {
  this.setState({
    catalogue: snapshot.val()
    });
  });
}

// Add item to user collection
  addToCollection(e) {
    const userUid = firebase.auth().currentUser.uid;
    const collection = {
    nom: this.state.catalogue[key].nom,
    parution: this.state.catalogue[key].parution
    };

 firebase.database().ref(`users/${userUid}/collection`).push(collection)
}



render(){
  const catalogue= Object.keys(this.state.catalogue).map(key => {
    return (
      <div key={key}>
        <h3>{this.state.catalogue[key].nom}</h3>
        <p>{this.state.catalogue[key].parution}</p>
        <button className="btn btn-success" onClick= 
{this.addToCollection}>Ajouter à ma collection</button> </div>
        )
      });
  return (
    <div>
      {catalogue}
    </div>
  )
 }
}

const authCondition = (authUser) => !!authUser;

export default withAuthorization(authCondition)(Catalogue);

从“React”导入React；
使用授权从“/使用授权”导入；
从“firebase”导入*作为firebase；
从导入{config，database，db，auth，itembase，}
“../firebase/firebase”；
类目录扩展了React.Component{
构造函数（）{
超级（）；
此.state={
目录：[]
};
}
//来自Firebase的物品
componentDidMount（）{
数据库.on（'value'，快照=>{
这是我的国家({
目录：snapshot.val（）
});
});
}
//将项目添加到用户集合
添加到集合（e）{
const userUid=firebase.auth（）.currentUser.uid；
常量集合={
名称：this.state.catalog[key].nom，
参数：this.state.catalog[key]。参数
};
firebase.database（）.ref（`users/${userUid}/collection`）.push（collection）
}
render（）{
const catalog=Object.keys（this.state.catalog）.map（key=>{
返回(
{this.state.catalog[key].nom}
{this.state.catalog[key].parution}

阿贾玛收藏
)
});
返回(
{目录}
)
}
}
const authCondition=（authUser）=>！！authUser；
使用授权导出默认值（authCondition）（目录）；

---

提前感谢您的帮助

您必须这样渲染：

render(){
const catalogues= this.state.catalogue.map(catalogue, key) => { 
return (
     <div key={key}>
     <h3>{catalogue.nom}</h3>        
     <p>{catalogue.parution}</p>
     <button className="btn btn-success" onClick={this.addToCollection}>Ajouter à ma collection</button> </div>
     ) 
  });

return(
    <div>
    {catalogues}
   </div>
}

render（）{
const cataloges=this.state.catalog.map（catalog，key）=>{
返回(
{catalog.nom}
{catalog.parution}

阿贾玛收藏
) 
});
返回(
{目录}
}

---

这应该行得通。

更改如下：

addToCollection(key, e) {
const userUid = firebase.auth().currentUser.uid;
const collection = {
nom: this.state.catalogue[key].nom,
parution: this.state.catalogue[key].parution
};

firebase.database().ref(`users/${userUid}/collection`).push(collection)
};

//then in your render you have to bind your event and key:
render(){
  const catalogue= Object.keys(this.state.catalogue).map(key => {
    return (
      <div key={key}>
        <h3>{this.state.catalogue[key].nom}</h3>
        <p>{this.state.catalogue[key].parution}</p>
    <button className="btn btn-success" onClick={this.addToCollection.bind(this, key)}>Ajouter à ma collection</button> </div> //change this line.
        )
      });
  return (
    <div>
      {catalogue}
    </div>
  )
 }

addToCollection（键，e）{
const userUid=firebase.auth（）.currentUser.uid；
常量集合={
名称：this.state.catalog[key].nom，
参数：this.state.catalog[key]。参数
};
firebase.database（）.ref（`users/${userUid}/collection`）.push（collection）
};
//然后在渲染中，必须绑定事件和密钥：
render（）{
const catalog=Object.keys（this.state.catalog）.map（key=>{
返回(
{this.state.catalog[key].nom}
{this.state.catalog[key].parution}

Ajouteráma collection//更改此行。
)
});
返回(
{目录}
)
}

---

希望能有所帮助。

你好，维托·马迪奥，非常感谢你的帮助。我按你说的做了，但只按了“添加到收藏”按钮是显示的。如果你想看到它，我会在我的第一篇文章中加入我的全部新代码。我已经成功地在页面中显示了数据。现在，当我点击我的按钮时，我无法将数据从这个对象导出到我的函数中。谢谢，谢谢，谢谢，非常感谢Vito Madio！！工作很棒！！