通过redux从firebase显示另一个组件中一个组件的数据答案

【问题标题】：Display data of a component in another component from firebase through redux通过redux从firebase显示另一个组件中一个组件的数据
【发布时间】：2020-08-11 21:33:58
【问题描述】：

我是 React 和 Redux 的新手，我一直在尝试制作一个 CRUD 应用程序，以便我可以练习这些技术。该应用旨在将联系人添加到列表、编辑或删除联系人，所有这些都使用 Firebase 作为后端。

到目前为止，我可以将表单组件 (NewContact.js) 中的联系人添加到 firebase（使用 Thunk 作为中间件）并将其呈现给相应的组件 (Contact.js)。

Contact.js Component

现在，我想要做的是，当我单击编辑图标时，我应该在 EditContact 组件上以表单形式拥有该特定联系信息，并且能够对其进行编辑，然后将更新提交到 firebase。

NewContact.js 组件的代码如下：

import React, { Component } from "react";
import { connect } from "react-redux";
import { newContact } from "../../store/actions/ContactAction";

class NewContact extends Component {
  state = {
    fullName: null,
    phoneNumber: null,
    email: null,
    jobAndTitle: null,
    note: null,
  };

  // Methods
  handleChange = (event) => {
    this.setState({
      [event.target.id]: event.target.value,
    });
  };

  handleSubmit = (event) => {
    event.preventDefault();
    this.props.newContact(this.state);
  };

  render() {
    return (
      <div className="new-contact">
        <div className="new-contact__header">
          <h3>New Contact</h3>
        </div>
        <div className="new-contact__body">
          <form autoComplete="off" onSubmit={this.handleSubmit}>
            <label htmlFor="fullName">Full Name</label>
            <input
              type="text"
              id="fullName"
              required
              onChange={this.handleChange}
            />
            <label htmlFor="email">Email</label>
            <input type="email" id="email" onChange={this.handleChange} />
            <label htmlFor="phoneNumber">Phone Number</label>
            <input
              type="text"
              id="phoneNumber"
              required
              onChange={this.handleChange}
            />
            <label htmlFor="jobAndTitle">Job & Title</label>
            <input type="text" id="jobAndTitle" onChange={this.handleChange} />
            <label htmlFor="note">Note</label>
            <textarea id="note" onChange={this.handleChange}></textarea>
            <div className="submit-wrapper">
              <input type="submit" value="Add Contact" />
              <input type="reset" />
            </div>
          </form>
        </div>
      </div>
    );
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    newContact: (contact) => dispatch(newContact(contact)),
  };
};

export default connect(null, mapDispatchToProps)(NewContact);

这里是 EditContact.js 组件的代码：

import React, { Component } from "react";
import { connect } from "react-redux";
import { firestoreConnect } from "react-redux-firebase";
import { compose } from "redux";

class EditContact extends Component {
  render() {
    return (
      <div className="edit-contact">
        <div className="edit-contact__header">
          <h3>Edit Contact</h3>
        </div>
        <div className="edit-contact__body">
          <form autoComplete="off">
            <label htmlFor="fullName">Full Name</label>
            <input type="text" id="fullName" required />
            <label htmlFor="email">Email</label>
            <input type="email" id="email" />
            <label htmlFor="phoneNumber">Phone Number</label>
            <input type="text" id="phoneNumber" required />
            <label htmlFor="jobAndTitle">Job & Title</label>
            <input type="text" id="jobAndTitle" />
            <label htmlFor="note">Note</label>
            <textarea id="note"></textarea>
            <div className="submit-wrapper">
              <input type="submit" value="Edit Contact" />
              <input type="reset" />
            </div>
          </form>
        </div>
      </div>
    );
  }
}

export default EditContact;

我尝试使用以下代码将 EditContact 组件连接到 Firebase，但它会引发错误 Cannot read property 'params' of undefined

  const mapStateToProps = (state, myProps) => {
  console.log(state);
  const id = myProps.match.params.id;
  const contacts = state.firestore.data.contacts;
  const contact = contact ? contact[id] : null;
  return {
    contact: contact,
  };
};

export default compose(
  connect(mapStateToProps),
  firestoreConnect([{ collection: "contacts" }])
)(EditContact);

我希望我在我的帖子中已经很清楚了。如果有人能启发我，我将不胜感激。

【问题讨论】：

你好阿明！其实你还不是很清楚。您尝试过哪些不起作用的方法？
如果您想了解如何从 firebase 获取/创建/编辑/删除数据，您应该查看他们的文档和教程：firebase.google.com/docs/firestore
抱歉，我将编辑帖子并使其更清晰。但基本上，我希望能够编辑表格中的数据（参见帖子上的图片），为此我制作了一个名为 EditContact 的化合物，我希望在其中显示数据以便我可以编辑它跨度>
好的。您为实现这一目标做了什么尝试？
在 EditContact 组件中，我尝试通过 id 检索数据，认为它会检索我点击的那个，但我找不到如何做到这一点

标签： javascript reactjs firebase redux react-redux

【解决方案1】：

mapStateToProps 中的第二个参数是包装的组件道具。渲染 EditContact 时，match 未被设置为道具。由于 myProps.match 未定义，因此在尝试读取未定义的属性 params 时会引发类型错误。 match 需要作为 prop 传递给呈现 EditContact 的包装组件。

<EditContact params={params} /> 将修复您所看到的错误，假设参数具有这种形状

const params = {
  match: {
   id: <some id>
  }
};

【讨论】：