开发者问题收集

Reacts js TypeError：无法读取未定义的属性“params”

2021-06-01
119
javascript reactjs

我想在更改网址时转到下一页 这是我在 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;
3个回答

只需使用可选链接 

const page = props.match?.params?.page || 1;
Dani
2021-06-01

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

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

您还可以使用 prop-types npm 包来验证您的组件属性。类似这样的操作将验证并定义组件 prop 的默认值。 

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]);
Rômulo Bourget Novas
2021-06-01

看来您正在检查参数是否为数字。默认情况下，参数值是字符串。您可以使用 parseInt 将其转换为数字来解决问题。 

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

希望对您有所帮助。

Jose Munoz
2021-06-01