从Firebase通过Redux显示另一个组件中一个组件的数据

如何解决从Firebase通过Redux显示另一个组件中一个组件的数据

我是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，但是它抛出错误无法读取未定义的属性'params'

  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);

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

解决方法

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

<EditContact params={params} />可以解决您在假设参数具有这种形状的情况下看到的错误

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