我尝试在React中实现搜索功能，当我清除输入时，我没有取回完整列表

Question

搜索功能可以工作，但是当我清除输入值时，完整列表不会显示。我正在使用

filter

方法，我不明白如何获取完整列表。

//search the subscriber in the list
function SearchBar() {
    const { subscriber, setsubscriber } = useContext(Context)

    const handleSearch = (e) => {
        e.preventDefault()
        const text = e.target.value;

        const filteredUser = subscriber.filter((user) => {
            if (user.name.includes(text)) {
                return user.name
            }
        })
        setsubscriber(filteredUser)
    }
    return (
        <div className='searchBar'><TextField
            id="input1"
            label="Search User Name"
            onChange={(e) => handleSearch(e)}
        />
        </div>
    )
}

//list of subscriber
export default function ShowSubscriber() {
    const { subscriber } = useContext(Context)
    const subscribers = subscriber && subscriber.map &&
        subscriber.map((item, i) =>
        (
            <div style={{ display: "flex", marginTop: "20px" }} key={i}>
                <span style={{ fontSize: "25px", marginLeft: "20px", marginRight: "20px" }}>{item.name} {item.subscribedToChannel}</span>
                <EditSubscriber />
                <DeleteSubscriber /></div>))

    return subscribers;
}

Answer 1

不要改变你的事实来源，例如由

subscriber

提供的

Context

值/状态。过滤是一种“减少”操作，一旦从源数组中删除元素，如果不重新获取所有数据、缓存其单独的副本或跟踪删除的内容，就无法将其恢复。这将是无关的、不必要的工作和逻辑。 我建议将过滤值存储到

Context

中，并提供已过滤的

subscriber

值，或者向消费者提供

subscriber

和过滤器值，以便他们应用和计算派生的“状态”值。示例：

计算并提供派生的过滤订阅者数组

• Context.jsx

  const filteredSubscribers = React.useMemo(() => {
    return (subscriber ?? []).filter(
      item => item.name.toLowerCase().includes(search)
    );
  }, [search, subscriber]);

  export default function ShowSubscriber() {
    const { filteredSubscribers } = useContext(Context);
  
    return filteredSubscribers
      .map((item, i) => (
        <div style={{ display: "flex", marginTop: "20px" }} key={i}>
          <span
            style={{
              fontSize: "25px",
              marginLeft: "20px",
              marginRight: "20px"
            }}
          >
            {item.name} {item.subscribedToChannel}
          </span>
          <EditSubscriber />
          <DeleteSubscriber />
        </div>
      ));
  }
  

同时为消费者提供
• subscriber

  和

  search

  function SearchBar() {
    const { search, setSearch } = useContext(Context);
  
    const handleSearch = (e) => {
      e.preventDefault()
      setSearch(e.target.value.toLowerCase());
    }
  
    return (
      <div className='searchBar'>
        <TextField
          id="input1"
          label="Search User Name"
          value={search}
          onChange={handleSearch}
        />
      </div>
    )
  }

  export default function ShowSubscriber() {
    const { search, subscriber } = useContext(Context);
  
    return subscriber
      ?.filter(item => item.name.toLowerCase().includes(search))
      .map((item, i) => (
        <div style={{ display: "flex", marginTop: "20px" }} key={i}>
          <span
            style={{
              fontSize: "25px",
              marginLeft: "20px",
              marginRight: "20px"
            }}
          >
            {item.name} {item.subscribedToChannel}
          </span>
          <EditSubscriber />
          <DeleteSubscriber />
        </div>
      ));
  }