Prop是Reactchild中的一個空物件

我正在嘗試向父組件添加搜索欄。所有邏輯在控制臺中都運行良好。對于在搜索欄位中輸入的每個字符，我得到的結果較少。我嘗試將它傳遞給子組件以呈現卡片結果，但我得到一張空白卡片：我看不到傳遞的資料。

父組件 <AllAssets>

class AllAssets extends Component {

  state = {
    cards: [],
    searchField: '',
  }

  async componentDidMount() {
    const { data } = await cardService.getAllCards();
    if (data.length > 0) this.setState({ cards: data });
  }

  addToFavorites = (cardId, userId) => {
    saveToFavorites(cardId, userId)
    toast.error("The asset was added to your favorites.")
  }

  render() {

    const { cards, searchField } = this.state;
    const user = getCurrentUser();

    const filteredAssets = cards.filter(card => (
      card.assetName.toLowerCase().includes(searchField.toLowerCase())));

    console.log(filteredAssets);

    return (
      <div className="container">
        <SearchBox placeholder={"Enter asset name..."}
          handleChange={(e) => this.setState({ searchField: e.target.value })}
        />
        <PageHeader>Assets available for rent</PageHeader>
        <div className="row">
          <div className="col-12 mt-4">
            {cards.length > 0 && <p>you can also add specific assets to your favorites and get back to them later...</p>}
          </div>
        </div>
        <div className="row">
          {!!filteredAssets.length ? filteredAssets.map(filteredAsset => <SearchResult addToFavorites={this.addToFavorites} filteredAsset={filteredAsset} user={user} key={filteredAsset._id} />) :
            cards.map(card => <CardPublic addToFavorites={this.addToFavorites} card={card} user={user} key={card._id} />)
          }
        </div>
      </div >
    );
  }
}

export default AllAssets;

子組件 <SearchResult>

const SearchResult = (addToFavorites, filteredAsset, card, user) => {
  return (
    <div className="col-lg-4 mb-3 d-flex align-items-stretch">
      <div className="card ">
        <img
          className="card-img-top "
          src={filteredAsset.assetImage}
          width=""
          alt={filteredAsset.assetName}
        />
        <div className="card-body d-flex flex-column">
          <h5 className="card-title">{filteredAsset.assetName}</h5>
          <p className="card-text">{filteredAsset.assetDescription}</p>
          <p className="card-text border-top pt-2">
            <b>Tel: </b>
            {filteredAsset.assetPhone}
            <br />
            <b>Address: </b>
            {filteredAsset.assetAddress}
          </p>
          <p>
            <i className="far fa-heart text-danger me-2"></i>
            <Link to="#" className="text-danger" onClick={() => addToFavorites(card._id, user._id)}>Add to favorites</Link>
          </p>
        </div>
      </div>
    </div>
  );
}

export default SearchResult;

當我console.log(filteredAsset)進入時，<SearchResult>我得到一個空物體。我究竟做錯了什么？

uj5u.com熱心網友回復：

這一行是不正確的：

const SearchResult = (addToFavorites, filteredAsset, card, user) => {

您正在傳遞位置引數，而不是命名道具。改為這樣做：

const SearchResult = ({addToFavorites, filteredAsset, card, user}) => {

在您的原始代碼中，React 將您所有的 props 作為欄位附加到第一個引數上。因此，它們可以在孩子中訪問，但不會以您嘗試訪問它們的方式訪問。如果您想知道會發生什么，請嘗試注銷子項中每個引數的值。

更正后的版本傳入一個欄位名稱與道具名稱匹配的物件。它的速記相當于：

const SearchResult = (
  {
    addToFavorites: addToFavorites, 
    filteredAsset: filteredAsset, 
    card: card, 
    user: user,
  }
) => {

標籤：javascript 反应

上一篇：單擊另一個按鈕時如何切換按鈕？

下一篇：從Promise.all(...)回傳物件