我正在用react、redux-toolkit和typescript做一个库项目（更多说明请参见链接）。
我在做一个addToWishlist函数：用户只需点击星星，代码就会调度修补数据库的操作，状态也随之更新。2还有一个操作可以将图书从列表中删除。
在<Wishlist />组件中，我当然要呈现每本书的标题和其他数据。因此我使用useAppSelector来检索wishlist和整个list的书，并在filter和map的帮助下，我将得到相应的书，但我无法呈现它们，因为它给了我一个ts错误：index.d.ts(1373, 9): The expected type comes from property 'children' which is declared here on type 'DetailedHTMLProps<HTMLAttributes<HTMLUListElement>, HTMLUListElement>'个

• 关于结构的重要说明 *

wishlist是一个字符串数组，这些字符串是books的id。而books的整个list是一个对象数组：每个对象是一本书，具有标题、作者、ID等。

我的问题：

1.这到底是怎么回事？
1.基本上，是在wishlist数组中保存id（像我所做的那样）更好，这样我就必须用filter和map在我的<Wishlist />组件中检索图书的数据，还是保存整本书（或者至少是我需要的信息）更好，这样更容易获得数据？
1.在第一种情况下，当我必须使用filter和map检索数据时，呈现列表的最佳实践是什么？
以下是尝试：

const Wishlist = () => {
  const dispatch = useAppDispatch();
  const wishlist = useAppSelector(state => state.user.userInfo.wishlist);
  const list = useAppSelector(state => state.catalogue.list);

  const renderBooks = () => {
    return wishlist.map(wishId => {
      list.filter(book => {
        if (book.id === wishId) {
          return (
            <li>{book.title}</li>
          )
        }
      })
    })
  }

  
  return (
    <ul>
      {renderBooks()}
    </ul>
  )
};

export default Wishlist;

已编辑-可能问题不在于方法的连接，而在于函数调用中的某些内容？

• 另一个更小的例子，另一个解决方案，但同样的问题 *

interface fakeObj {
    id: string;
    name: string;
  }
  const fakeIds = ['5', '12', '878'] // this is my 'wishlist', containing only ids
  const fakeList: fakeObj[] = [ // this is my 'list', containing objects, which were single books
    { id: '334', name: 'Tony' },
    { id: '5', name: 'Milly' },
    { id: '12', name: 'Jack' },
    { id: '7', name: 'Stew' },
    { id: '878', name: 'Mark' },
    { id: '87998', name: 'Greg' }
  ]

  const renderArray = () => {
    const arr: fakeObj[] = []; 
    fakeIds.forEach(id => {
      fakeList.filter(obj => {
        if (obj.id === id) {
          arr.push(obj)
        }
      })
    })
    return arr; // the returned array is what I want: an array continaing the objects that i need
  }

  return (
    <ul>
      {/* The problem actually is here! */}
      {renderArray()} 
    </ul>
  )