Question

在React App中得到以下错误：道具类型失败：提供给match.params的类型object的道具Page无效，预期string。

下面是我的代码段：

import React from 'react';
import PropTypes from 'prop-types';

const Page = ({ match }) => {
  const { id } = match.params;

  return (
    <div>
      <h1>Page {id}</h1>
    </div>
  );
};

Page.propTypes = {
  match: PropTypes.shape({
    params: PropTypes.string,
  }).isRequired,
};
export default Page;

任何人都可以建议我在哪里犯错误，因为match.params已经在PropType中提到为字符串类型。预先感谢！

Answer 1

params道具中的

react-router是object而非string，因此您应该像PropTypes.object那样使用它，或使用{ PropTypes.shape

Page.propTypes = {
  match: PropTypes.shape({
    params: PropTypes.object,
  }).isRequired,
};

Answer 2

Params是一个对象，因此您必须将其更改为PropTypes.object或使用ID为此类的proptypes

Page.propTypes = {
  match: PropTypes.shape({
    id: PropTypes.string,
  }).isRequired,
};

Answer 3

看看您的代码，很明显match.params不是字符串。无论您调用的是Page组件，还是使用id作为match.params.id的对象，都将传递该对象类型。

const { id } = match.params;

您的propTypes应该如下所示：

Page.propTypes = {
    match: PropTypes.shape({
    params: PropTypes.shape({
        id: PropTypes.string,
    }),
  }).isRequired,
};

这将消除您遇到的错误。

道具类型失败：提供给“页面”的对象类型无效的道具“ match.params”，预期为“字符串”

3 个答案: