如何将收藏夹项添加到新创建的列表中

如何解决如何将收藏夹项添加到新创建的列表中

想知道如何使喜欢的项目（在本例中为元素A至C）仅出现在一个特定的，新创建的列表（可由用户创建）中。

就目前而言，当我喜欢某个元素时，便可以在每个新创建的列表中看到它。下面是一个示例（抱歉缺少样式，仅用于// child.ts @ViewChild(TemplateRef) headerTpl: TemplateRef; constructor(private parent: ParentComponent) {} ngAfterViewInit() { Promise.resolve().then(() => this.parent.showHeaderTemplate(this.headerTpl)); } // child.html <ng-template #header> hello header </ng-template> ）：

我认为，可以使用列表ID（类似于删除列表或收藏夹的方式）来完成此操作，但需要对其有更好的了解。 另外，我在Chrome中收到一条警告，即子元素没有键值。我试图在<br />的.map内添加shortId（像<li>一样，但很害怕，我的解决方案不是最佳解决方案，应该将其放在其他位置（仅在哪里？） ）。

这是我的CodeSandbox LINK

欢迎任何帮助。

解决方法

我在这里一起砍了一些东西。 可以进行一些改进，例如添加打字稿和减少代码，但是我做到了，因为您不了解自己的编码技能，所以您可以继续学习。

这是一个codeSandbox链接

import React,{ useState } from "react";

const App = () => {
  const [inputValue,setInputValue] = useState("");
  const [items,setItems] = useState([]);

  const addItem = () => {
    const newItem = {
      id: new Date().getTime(),fav: false,title: inputValue
    };
    setItems((oldState) => [...oldState,newItem]);
    setInputValue("");
  };

  const makeFav = (id) => {
    console.log("id prop",id);

    const allItems = [...items];
    const itemIndex = allItems.findIndex((item) => item.id === id);
    allItems[itemIndex].fav = !allItems[itemIndex].fav;
    setItems(allItems);
    console.log("itemIndex",itemIndex);
  };

  return (
    <div className="App">
      <input
        type="text"
        placeholder="Add item"
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
      />
      <button onClick={() => addItem()}>Add</button>
      <hr />
      <h2>Favorites</h2>
      {items
        .filter((item) => item.fav === true)
        .map((item) => {
          return (
            <div key={item.id}>
              {item.title}
              <button onClick={() => makeFav(item.id)}>un fav</button>
            </div>
          );
        })}
      <hr />
      <h2>list</h2>
      {items
        .filter((item) => item.fav === false)
        .map((item) => {
          return (
            <div key={item.id}>
              {item.title}
              <button onClick={() => makeFav(item.id)}>fav</button>
            </div>
          );
        })}
    </div>
  );
};
export default App;