Question

您好，我正在编写一些React代码，并且如果没有其他代码，则有这个代码，如果通过componentDidMount中的fetch加载数据，则应将isLoaded设置为true并呈现数据。基本的东西。现在这是一个问题，我有一条通用路由，即/:merchantId，因此基本上在componentDidMount中，我在那里设置了路由URL（我将在稍后显示）。在else块中，我做条件是，如果URL匹配某些内容，则应为其提供一些设置值，然后返回它。因此，我试图确保如果Url不存在，则应将其重定向到404路由，但不进行重定向，它仅显示正在显示isLoaded为false的正在加载数据的微调框，因此它正在等待数据。

我试图删除If Else语句，该语句使正在加载微调器或JSX以及所有底层逻辑成为可能，然后我遇到了这个讨厌的无法读取null属性，这表明它没有获取数据和设置状态。我将在render方法下共享代码段，但该代码段已被阻塞，因此我将仅共享要点

export default function App() {
  return (
    <div>
      <Router>
        <header>
          <nav>
            <ul className="main-nav">
              <Link to="/">
                {" "}
                <img src={palogo} alt="logo" className="logo" />
              </Link>
              <li>
                <Link to="/">Home</Link>
              </li>
              <li>
                {" "}
                <Link to="/services">Services</Link>
              </li>
              <li>
                <Link to="/contact">Contact Us</Link>
              </li>
              <li>
                <Link to="about">About</Link>
              </li>
              <input type="text" className="search" placeholder="Search" />
              <a className="btn btn-fade">Register</a>
              <a className="btn btn-full">Login</a>
            </ul>
          </nav>
        </header>

        <Switch>
          <Route path="/" exact component={Home} />
          <Route path="/about" exact component={AboutUs} />
          <Route path="/contact" exact component={contactUs} />
          <Route path="/services" exact component={Services} />
          <Route path="/faqs" component={FAQS} />
          <Route path="/notfound" exact component={Invalid} />
          <Route path="/:merchantId" exact component={biller} />
          <Route path="/report" component={TrxResp} />
        </Switch>
      </Router>
    </div>
  );
}

this.state = {
      isLoaded: false,
      obj: [],
      merchant: null,
      Aata: null,
      "Amount to be paid": this.props.Amountt,
      "Phone Number": this.props.PhoneNumber,
      "Last Four Digits of the card you want to load": this.props.phoneNumber,
      Amountt: null,
      "Total Due": null,
      Description: null,
      "Convenience Fee": "100",
      "Customer Code": this.props.code,
      "Invoice Number": this.props.invoice,
      "Customer Name": this.props.name,
      "BL Number": null,
      "Bill Amount": this.props.Amounttt,
      VendorParameterValue: this.props.VendorParameterValue,
      airtime: [],
      bills: [],
      collections: [],
      lotteries: [],
      unifiedmoney: [],
      EmailAddress: this.props.EmailAddress,
      Amount: this.props.Amount,
      ProductId: null,
      show: false,
      ProductName: null
    };

//ComponentDidMount 
componentDidMount() {
    console.log(this.props);
    //get the URL from what is passed into the route
    const url = this.props.match.params.merchantId;
    console.log(this.props.match.params.merchantId);
    getTheSimProviders().then(data => {
      //get the category by filtering the merchants where url === the url passed in
      //so it's like give me back the array which has at least a merchant whose url === url passed
      const category = data.filter(
        x => x.Merchants.filter(m => m.Url === url).length > 0
      )[0];

      if (!category) return;
      const merchants = category.Merchants.filter(m => m.Url === url)[0];
      const merchant = [merchants];
      console.log(category);
      console.log(merchant);

      if (this._isMounted) {
        this.setState({
          isLoaded: false
        });
      } else {
        this.setState({
          isLoaded: true,
          merchant: merchant[0],
          obj: merchant[0].Products,
          ProductId: merchant[0].Products[0].Id,
          airtime: data[0].Merchants,
          bills: data[1].Merchants,
          collections: data[2].Merchants,
          unifiedmoney: data[3].Merchants,
          lotteries: data[4].Merchants,
          ProductName: merchant[0].Products[0].Name
        });
        console.log("data 1 is:");
        console.log(this.state.bills);
      }
    });
  }

//render method 
render() {
    const { isLoaded } = this.state;
    if (!isLoaded) {
      return (
        <div className="center">
          <img src={Spinner} alt="loading spinner" />
        </div>
      );
    } else {

      // const [collections] = this.state.collections.filter(
      //   el => el.Url === this.props.match.params.merchantId
      // );
      const [gnld, page, onecredit, maersk, safmarine] = this.state.collections;


      let merchant = ( some jsx code);

if(this.state.merchant.Url ==="mtn" o|| ...) render JSX 
else if(this.state.merchant.Url !== this.props.match.params.merchantId) {return window.location = "/notfound }
else {window.location= "/notfound} 
return merchant; //that is the JSX code. this works
    return merchant;
    }
  }
}
export default biller;

如果Url I筛选器不等于从this.props.match.params.merchantId传入的URL，我希望它将我重定向到404路由。没有。当我删除所有加载微调器逻辑时，它会引发“无法读取null的属性”，这是我最初设定的商家状态。

重定向到404页面失败，它只是呈现了加载微调框

0 个答案: