Question

我正在尝试使用Firestore在我的React / Redux应用程序中实现删除功能。但是我收到此错误Cannot read property 'params' of undefined，好像我的URL中没有ID？我还认为我需要传递我要删除的文档的ID，但该怎么做？绑定到onDelete吗？我认为我的错误被替换为该ID丢失的URL中的ID，但我不确定

import React, { Component } from "react"
import { compose } from "redux"
import { connect } from "react-redux"
import { firestoreConnect } from "react-redux-firebase"
import { Link } from "react-router-dom"
import PropTypes from "prop-types"


class Health extends Component {
  onDeleteClick = () => {
    const { delHealth, firestore, history } = this.props

    firestore
      .delete({
        collection: "delHealth",
        doc: delHealth.id,
      })
      .then(history.push("/"))
  }
  render() {
    const { health } = this.props

    if (health) {
      const heal = health.slice(0, 3)
      return (
        <table>
          <thead>
            <tr>
              <th> Condition </th> <th> Dosage </th> <th> Fever </th>{" "}
              <th> Headache </th> <th> Pain </th> <th> Weight </th>{" "}
              <th> Hearth Rate </th> <th> Temperature </th> <th />
            </tr>{" "}
          </thead>{" "}
          <tbody>
            {" "}
            {heal.map(el => (
              <tr key={el.id}>
                <td> {el.condition} </td> <td> {el.dosage} </td>
                <td> {el.fever} </td> <td> {el.headache} </td>
                <td> {el.pain} </td>{" "}
                <td>
                  {" "}
                  {el.weight}
                  kg{" "}
                </td>{" "}
                <td> {el.hearthRate} </td> <td> {el.temperature} </td>
                <td>
                  <div className="buttons-edit-del">
                    <Link to={`/health/healthEdit/${el.id}`}>
                      <i class="fas fa-pen" />
                    </Link>{" "}
                    <i class="fas fa-trash-alt" onClick={this.onDeleteClick} />{" "}
                  </div>{" "}
                </td>{" "}
              </tr>
            ))}{" "}
          </tbody>{" "}
        </table>
      )
    } else {
      return <h1> loding </h1>
    }
  }
}

Health.propTypes = {
  firestore: PropTypes.object.isRequired,
  health: PropTypes.array,
}

export default compose(
  firestoreConnect(props => [
    {
      collection: "health",
      storeAs: "delHealth",
      doc: props.match.params.id,
    },
  ]),
  connect(({ firestore: { ordered } }, props) => ({
    health: ordered.health,
    delHealth: ordered.delHealth && ordered.delHealth[0],
  }))
)(Health)

Answer 1

很可能您正在使用最新版本的React Router（v4 +）。因为在较旧的React Router中，这是做事的方式。但是在更新的react-router库中，您必须使用“ withRouter ”高阶组件包装整个组件。每当渲染时，它将更新的匹配，位置和历史道具传递给包装的组件。

首先，您必须导入withRouter。

import { withRouter } from "react-router";

然后，您必须将其与Router一起包装。

   export default withRouter(compose(
    firestoreConnect(props => [
      {
        collection: "health",
        storeAs: "delHealth",
        doc: props.match.params.id,
      },
    ]),
    connect(({ firestore: { ordered } }, props) => ({
      health: ordered.health,
      delHealth: ordered.delHealth && ordered.delHealth[0],
    }))
  )(Health))

希望这会有所帮助。

React / Redux + Firestore无法读取未定义的属性“ params”

1 个答案: