Question

我的电子商务项目有一个“ ProductPage”组件，用于显示价格，颜色，尺寸等产品信息。

该组件从网址（例如“ store.com/product/123456”）获取产品ID。然后使用此类产品ID，从graphql API中检索产品信息，并将其设置为“产品”状态变量。

当用户输入包含不存在的产品ID的URL时，会发生此问题；在这种情况下，API无法获取任何数据，因此产品变量未定义，浏览器显示错误“产品未定义”。

在这种情况下，是否可以使用条件渲染来显示错误消息或重定向到404页面？

更新：

我正在使用功能组件。

Answer 1

您可以使用条件渲染来显示产品页面或404页面

在ComponentDidMount中，您获取数据并将其设置为状态，如果有错误，则将错误设置为状态

在呈现过程中，如果出现错误，则显示CustomErrPage组件，否则显示Productpage组件

例如

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [],
      err: null
    }
  }

  componentDidMount() {
    axios.get('store.com/product/123456')
    .then(res => this.setState({
      data: res.data
    }))
    .catch(err => this.state({
      err: err }))
  }

  render() {
    return (
      <div>
        {this.state.err ? <CustomErrPage /> : <ProductPage data={this.state.data} /> }
      </div>
    )
  }
}

Answer 2

要在输入的id为false时使用条件渲染显示404错误消息，您可以创建带有路由的404页面组件并进行测试，以便在无法识别id时将其重定向到404页面：

  const validId = parseInt(props.match.params.id);
  if (!validId){
    return <Redirect to="/404"/>;
  }

当变量未定义时，可以使用React组件的条件渲染吗？

2 个答案: