Question

我尝试在React Firebase应用程序中更新数据。一切正常，我可以以模态恢复正确的数据，并对其进行修改。

但是，当我将数据设置为firebase（带有“ updateContent”函数）时，由于没有指定所选项目的确切路径，因此整个项目集合都被删除了，因此，我需要恢复问题：我设法检索了元素的所有信息，但没有检索到它的ID，我尝试了很多事情，console.log每个带有ID项的函数，除我以外的所有东西都可以模态和我的函数“ updateContent”（同时显示我元素的其他信息没有问题）

能给我一点帮助吗？先感谢您。

当函数将数据从“命中组件”传递到我的模态组件时，这是我对每个物品的代码（模态用于修改物品数据）：

function handleClick (hit, onEdit) {

  onEdit({id: hit.objectID, marque: hit.marque, numero: hit.numero, reference: hit.reference, marquesuite: hit.marquesuite, cote: hit.cote})

}

const Hit = ({hit, onEdit}) =>

    <div className="item" id={hit.objectID}>
       <img src={hit.avatarURL} width={150} height={150}></img>
        <h1 className="marque">{hit.marque}</h1>
        <h3 className="numero">{hit.numero}</h3>
        <h4 className="reference">{hit.reference}</h4>
        <h4 className="marquesuite">{hit.marquesuite}</h4>
        <p className="cote">{hit.cote}</p>
        <button className="btn btn-warning" onClick={() => handleClick(hit, onEdit) }>Modifier</button>
        <button className="btn btn-danger" onClick={() => removeToCatalogue(hit)}>Supprimer</button> 
    </div>

  const Content = ({ onEdit, }) => {

    const EnhancedHit = props =>
       <Hit onEdit={ onEdit } { ...props } />

    return (
      <div className="text-center">  
        <Hits hitComponent={ EnhancedHit } />
      </div>
    )    


  }

现在，这是我的模态组件：

  updateContent = (e) => {
    e.preventDefault();
    const catalogue = {
      marque: this.state.marque,
      marquesuite: this.state.marquesuite,
      numero: this.state.numero,
      reference: this.state.reference,
      cote: this.state.cote,
      id: this.state.key,
    }


    console.log(catalogue)

    //firebase.database().ref(`catalogue`/).set(catalogue);


    };



  onOpenModal = (hit) => {
    this.setState({ open: true, id: hit.objectID, marque: hit.marque, numero: hit.numero, reference: hit.reference, marquesuite: hit.marquesuite, cote: hit.cote });
    console.log(hit.marque, hit.id)
  };

  onCloseModal = () => {
    this.setState({ open: false });
  };


  onInputChange(e) {
    this.setState({
      [e.target.name]: e.target.value
    });
  }

  render (){
    const { open } = this.state;


        <h1 className="text-center">Catalogue de capsule</h1>



        <InstantSearch
            apiKey="xxx"
            appId="xxx"
            indexName="xxx>


            <SearchBox translations={{placeholder:'Rechercher une capsule'}} width="500 px"/>


            <Content onEdit={this.onOpenModal}/>  


                <Modal open={open} onClose={this.onCloseModal} center>
                <form onSubmit={this.updateContent} key={this.state.objectID}>
                  <h2>Modification de la capsule :</h2>
                  <p>Marque de la capsule:<input type="text" class="form-control" name="marque" value={this.state.marque} onChange={this.handleChange}></input></p>
                  <p>Numéro de la capsule:<input type="text" class="form-control" name="numero" value={this.state.numero} onChange={this.handleChange}></input></p>
                  <p>Référence de la capsule:<input type="text" class="form-control" name="marquesuite" value={this.state.marquesuite} onChange={this.handleChange}></input></p>
                  <p>Référence de la capsule (suite):<input type="text" class="form-control" name="reference" value={this.state.reference}onChange={this.handleChange}></input></p>
                  <p>Cote de la capsule:<input type="text" class="form-control" name="cote" value={this.state.cote}onChange={this.handleChange}></input></p>
                  <button className="btn btn-success">Mettre à jour</button>
                </form>

                </Modal>



          </InstantSearch>

Answer 1

我找到了解决方案。只是在id属性中使用了相同的名称，如下所示：

onEdit({objectID: hit.objectID ...})

onOpenModal = (hit) => {
    this.setState({ open: true, objectID: hit.objectID, ... });
};

在React Firebase App中恢复权利ID元素

1 个答案: