React子组件SearchResult接收父组件传递props为空对象问题

• return (<SearchResult>作为React函数组件，参数接收逻辑错误。所有传递给组件的prop都会被整合为**第一个入参对象**，你直接按参数名罗列的写法，相当于把整个props对象赋值给了第一个参数`addToFavorites`，后面的`filteredAsset`、`card`、`user`全是undefined，自然拿不到数据。
  )
  

• 父组件调用时，只传递了addToFavorites、filteredAsset、user三个prop，没有传递名为card的prop，子组件中点击收藏时调用card._id会报错。

直接修改的入参为解构写法，同时替换收藏逻辑的取值来源：

// 用对象解构直接从props里取对应字段，删除无用的card参数
const SearchResult = ({addToFavorites, filteredAsset, 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(filteredAsset._id, user._id)}>Add to favorites</Link>
          </p>
        </div>
      </div>
    </div>
  );
}

export default SearchResult;

内容的提问来源于stack exchange，提问作者junior kim