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

问题描述 投票:0回答:1

搜索功能可以使用,但是当我清除输入值时,列表不会显示。 我正在使用过滤方法,我不明白如何获取完整列表。请帮忙

//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;

}

reactjs react-hooks
1个回答
0
投票

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

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>
        ));
    }
    
    
        
© www.soinside.com 2019 - 2024. All rights reserved.