Javascript 渲染动态地响应对象

我的问题是关于你们的想法和创造力

我有一个从SQL数据库获取信息的组件：

const [offers,setOffers] = useState([])

useEffect(()=>{
    axios.get(`http://localhost:8085/incoming`)
    .then(res=>{
       setOffers(res.data.recordset)

   })
   .catch(error=>console.log(error))},[])

就在页面加载时

在JSX中，我放置了一个填充表格的函数：

<tbody className="table-hover">
            {OfferItem(offers)}
        </tbody>

---

它的编写方式是在输入字段中键入时工作，但正如您所看到的，它完全过滤了数组，我丢失了其中的所有其他项。因此，我想知道一种过滤和重新呈现项目的方法，但例如，当我使用退格或删除整个搜索条件以再次查看整个数组信息时我必须承认我知道我的代码是如何工作的以及期望得到什么，但我不知道怎么做。有什么想法吗？

用一个单独的状态变量来存储过滤后的产品版本怎么样？因此，如果输入发生更改，您可以从完整的提供中重新筛选，并在新的状态变量中设置结果。不能，因为在我的JSX中，我将提供作为参数传递给我的函数，这似乎取决于所需的行为。最简单的修复方法是在searchAbout（）中检查空过滤器输入。即如果（string.length==0）setOffers（offers）；老实说，你完全正确！我是按照你的方式做的@applepeaperson

const OfferItem = (array)=>{
if(array!==undefined){
    return array.map((item,index)=>{
        return <IncomingOffer  singleitem={item} index={index+1} key={item.Number}/>
    })
}}

            <label>Относно:</label><input onChange={searchAbout} />

const searchAbout = (e)=>{
    e.preventDefault(e)
    const string = e.target.value.toUpperCase()
    const res = offers.filter(el=>Object.values(el).some(val=>val.toUpperCase().includes(string)))
    setOffers(res)
}