如何在使用四元運算符加載頁面時執行 function

Question

我正在學習本教程並慢慢地在我自己的方向上磨磨蹭蹭。 有一個房屋列表，帶有一個鏈接按鈕，可將您發送到包含人員列表的頁面。 但是，當您通過house單擊鏈接按鈕時，它將在houseId中顯示 houseId。 當人員列表加載時，我希望它檢查 url 是否有houseId 。

如果它具有 Id，則執行getPeopleFromHouse ，它基本上axios並將數據放入people: []中，它位於this.state = {...}中。 很難制定這個問題，所以這里的上下文是我擁有的代碼：

getPeopleFromHouse = (HouseId) => {
    axios.get("http://localhost:8080/house/getPeople/" + HouseId)
         .then(response => response.data)
         .then((data) => {
              this.setState({people:data});
         });
}

這是在render()的return中，我基本上想在有 Id 時擺脫按鈕（添加、編輯、刪除）並最后執行該方法，以便它只顯示來自那個房子的人：

<Card.Body>
<table striped bordered hover variant="dark">
  <thead>
    <tr>
      <th>Name</th>
      <th>Phone Number</th>
      <th>#</th>
    </tr>
  </thead>
  <tbody onLoad={!isNaN(parseInt(this.state.urlLastId)) === true ? this.getPeopleFromHouse(this.state.urlLastId) :
  null}> {this.state.people.length === 0 ?
  <tr align="center">
    <td colspan="{3}">{people.length} Users Available.</td>
  </tr>
  : currentPeople.map((person) => (
  <tr key="{person.PersonId}">
    <td>{person.FullName}</td>
    <td>{person.PhoneNumber}</td>
    <td>
      <ButtonGroup>
        <Link to={"addPersonToHouse/" + person.PersonId} className="btn btn-sm btn-outline-info">Add To House </Link>
        <Link to={"editPerson/" + person.PersonId} className="btn btn-sm btn-outline-primary">Edit </Link>
        <button size="sm" variant="outline-danger" onClick="{this.deletePerson.bind(this," person.PersonId)}>
          Delete
        </button>
      </ButtonGroup>
    </td>
  </tr>
  )) }
</table>
</Card.Body>

最后一件事對格式化感到抱歉，但是當我 ctrl+v 我的代碼時，它只會奇怪地格式化，我不知道如何修復它。

編輯：@Always Learning 的解決方案很好，但它不起作用，因為我還沒有為它制定路線，所以我添加了<Route path={"/getPeopleFromHouse/:houseId"} exact component={PersonList}/>現在它可以工作了：D

Answer 1

我發現在 return 語句之前實現這樣的邏輯更好，所以你可以這樣做：

const getPeopleRow = () => {
  console.log(">>>getPeopleRow called", this.state.people.length);
  return (
  <tr align="center">
    <td colspan="{3}">{this.state.people.length} Users Available.</td>
  </tr>
  );
}

const getButtonGroup = (currentPeople) => {
  console.log(">>>getButtonGroup called",currentPeople);
  return currentPeople.map((person) => (
    <tr key="{person.PersonId}">
      <td>{person.FullName}</td>
      <td>{person.PhoneNumber}</td>
      <td>
        <ButtonGroup>
          <Link to={"addPersonToHouse/" + person.PersonId} className="btn btn-sm btn-outline-info">Add To House </Link>
          <Link to={"editPerson/" + person.PersonId} className="btn btn-sm btn-outline-primary">Edit </Link>
          <button size="sm" variant="outline-danger" onClick="{this.deletePerson.bind(this," person.PersonId)}>
            Delete
          </button>
        </ButtonGroup>
      </td>
    </tr>
    ));
}

render() {
  let rows;
  if (this.state.people.length === 0) {
    rows = this.getPeopleRow();
  }
  else rows = this.getButtonGroup(currentPeople);
  console.log(">>>got Rows:",rows);
  return (
  <Card.Body>
  <table striped bordered hover variant="dark">
    <thead>
      <tr>
        <th>Name</th>
        <th>Phone Number</th>
        <th>#</th>
      </tr>
    </thead>
    <tbody onLoad={!isNaN(parseInt(this.state.urlLastId)) === true ? this.getPeopleFromHouse(this.state.urlLastId) :
    null}> 
    { rows }
  </table>
  </Card.Body>
  );
}

甚至可能將onLoad處理移到 React 生命周期方法之外，以便在組件加載時啟動它，而不是在表加載時啟動。