Question

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

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

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>

函数是：

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)
}

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

动态渲染React对象

0 个答案: