Reacts js TypeError：无法读取未定义的属性“参数”答案

【问题标题】：Reacts js TypeError: Cannot read property 'params' of undefinedReacts js TypeError：无法读取未定义的属性“参数”
【发布时间】：2021-06-01 18:57:31
【问题描述】：

我想在更改网址时移至下一页这是我在 react js 中的一些 web 应用程序代码。我正在尝试分页，但我无法访问参数。当我尝试使用console.log() 时，如何访问这些参数，因为这些也没有显示在控制台上。

const Products = (props) => {
  console.log(props);
  const [products, setProducts] = React.useState([]);
  const [total, setTotal] = React.useState(0);
  const classes = useStyles();
  const page = props.match.params.page ? props.match.params.page : 1;
  const getData = () => {
    productService
      .getProduct(page)
      .then((data) => {
        setProducts(data.products);
        setTotal(data.total);
      })
      .catch((err) => {
        console.log(err);
      });
  };
  React.useEffect(getData, []);
  return (
    <div>
      <h1>Products List:</h1>
      {userService.isAdmin() && (
        <Fab color="primary" aria-label="add" className={classes.addBtn}>
          <AddIcon />
        </Fab>
      )}
      <div className="container">
        {products.length == 0 ? (
          <p>No Product Found!</p>
        ) : (
          <Grid container spacing={3}>
            {products.map((product, index) => (
              <SingleProduct key={index} product={product} onDelete={getData} />
            ))}
          </Grid>
        )}
        <Grid items xs={12}>
          total: {total}
        </Grid>
      </div>
    </div>
  );
};
export default Products;

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

只使用可选链

const page = props.match?.params?.page || 1;

【讨论】：

【解决方案2】：

你的问题很简单。您在props.match 中定义的对象未定义，因此抛出错误。一个简单的解决方案是使用可选链。

    const page = props.match?.params?.page || 1;

您还可以使用prop-types npm 包来验证您的组件属性。像这样的东西会验证并为你的组件属性定义一个默认值。

import PropTypes from 'prop-types';

const Products = (props) => {...};

Products.propTypes = {
  match: PropTypes.shape({
    params: PropTypes.shape({
      page: PropTypes.number,
    }).isRequired,
  }).isRequired,
};

Products.defaultProps = {
  match: { params: {page: 1} },
};

最后，每当您使用useEffect 时，请确保您观察到执行回调的正确参数。在您的情况下，观察 page 变量的变化是有意义的，因为您正在使用此挂钩更新组件状态。 如果您不这样做，即使您更改了页面属性的值，您的组件状态也不会更新。

React.useEffect(getData, [page]);

【讨论】：

知道了，谢谢先生。

【解决方案3】：

您似乎正在检查参数中的数字。默认情况下，参数值是一个字符串。您可以通过使用 parseInt 将其转换为数字来解决您的问题。

....
   const getData = () => {
   productService
     .getProduct(parseInt(page))
     .then...
....

希望对您有所帮助。

【讨论】：