在反应中搜索对象数组答案

【问题标题】：search in array of object in react在反应中搜索对象数组
【发布时间】：2020-01-13 04:19:13
【问题描述】：

我使用这个库来显示我的数组https://github.com/oblador/react-native-collapsible 并从 API 获取数组并使用 Redux-Thunk 。现在我想在数组中搜索这是我的数据样本：

(3) [{…}, {…}, {…}]
0: {HARDWAREID: 420474797787, NICKNAME: "رضا نوری پور ایران 62 - 374 ع 66", SENTDATE: "14:47", XPOINT: 51.2906833, YPOINT: 35.6797716, …}
1: {HARDWAREID: 409792319815, NICKNAME: "ایران 78 - 875 ع 73", SENTDATE: "14:47", XPOINT: 55.35633, YPOINT: 29.964019, …}
2: {HARDWAREID: 2225434572, NICKNAME: "عابدین پور 938ع43", SENTDATE: "1398-06-19 17:54", XPOINT: 49.49388, YPOINT: 37.47155, …}

对于搜索框我使用这个库https://react-native-training.github.io/react-native-elements/

这是搜索框的代码：

<SearchBar
                        placeholder="جستجو"
                        onChangeText={this.updateSearch}
                        value={search}
                        containerStyle={{ backgroundColor: '#fff', borderRadius: 13,borderWidth:0.4, padding: 5,margin:8,height:50,width:wp('95%'),textAlign:'right'}}
                        inputContainerStyle={{ backgroundColor: '#fff',}}
                    />

在“onChange”中使用此代码：

updateSearch = search => {
        this.setState({search:search})
       // console.log(search)
       var found = this.props.data.find(function(element) {
        return element.POSDESCRIPTION.i === search;
     });
     console.log(found)
    };

但在 console.log 中得到“未找到”。

我读了一些帖子，但没有得到答案： method find javascript deep array object RN react native , How to filter array of objects in react native?，Finding an object in array and taking values from that to present in a select list，How to find object in array and show it in React component? 如何解决？感谢您的帮助。

更新：这是我的减速机：

import {GET_HARDWARE_START,GET_HARDWARE_SUCSSES,GET_HARDWARE_FAILED} from '../types';
let initialState = {
    data:'',
    isLoading:false,
    error:null
}

export default user = (state=initialState,action)=> {
    switch (action.type) {
        case GET_HARDWARE_START:
           return Object.assign({},state,{isLoading:true})  
         case GET_HARDWARE_SUCSSES:
                //console.log("this log from reducer:" + action.payload)
               // return action.payload
               return Object.assign({},state,{data: action.payload ,isLoading:false})   
        case GET_HARDWARE_FAILED:
           return Object.assign({},state,{error:action.payload,isLoading:true})  
        default:
            break;
    }
    return state
}

这是我在“updateSearch”方法中的 conole.log ： https://i.stack.imgur.com/iycqW.png

更新 2：从 API 获取完成的数据：

0:
CONTACTPERSONID: 2017011300
ENABLEPOLL: 0
HARDWAREID: 409792319815
LANDMARKID: 0
MESSAGETIME: "1دقيقه پيش"
MOVINGSTATE: "m"
NICKNAME: "ایران 78 - 875 ع 73"
POSDESCRIPTION: "ايران: استان كرمان - محور انار به شهربابك - 72 كيلومتر از  انار"
SENTDATE: "17:39"
SENTDATE1: "1398-06-23 17:39:16"
SIGNATURE: "1-Normal"
SPEED: 95
TRUCKSTATE: "در حال حرکت"
VEHICLETYPE: 0
XPOINT: 55.026634
YPOINT: 30.249145

【问题讨论】：

问题是，api调用是异步的，所以你不会马上得到数据。如果你在updateSearch中使用console.log(this.props.data)，你看到了什么？
你能把你的reducer的代码也贴出来吗？
是的，我在 componentDidMount 中获取数据，正确获取数据@paruchuri-p
你确定你的数据满足这个条件吗？ element.POSDESCRIPTION.i === search;?
能分享一下数据和搜索键吗？

标签： javascript react-native

【解决方案1】：

更新：

我更改代码并获得真实：

const data = _.filter(this.props.data,user=>{  
           console.log(user.POSDESCRIPTION)
         if (user.POSDESCRIPTION.includes(search))  {

             return true
         }else {
             return false
         }
        });
        console.log("data serach is : " +JSON.stringify(data) )
       // this.setState({activeSections:data})
        this._updateSections(data)
        this.setState({search:search})

【讨论】：