时间戳

首页 > 解决方案 > React Native Hook-如何将 json 数据放入状态挂钩

json - React Native Hook-如何将 json 数据放入状态挂钩

问题描述

我正在使用 React Native。我从“结果”中的 json 获得了我需要的过滤数据，但我想将此数据显示到反应状态钩子中，它显示一个空的 []。我希望用户编写城市和选择器以显示该城市的可能国家。

这是我的 JSON

```
data:[
{
    "id": 1704127,
    "name": "Madridejos",
    "state": "",
    "country": "PH",
    "coord": {
      "lon": 123.346199,
      "lat": 9.79116
    }
  },
  {
    "id": 1704129,
    "name": "Madrid",
    "state": "",
    "country": "PH",
    "coord": {
      "lon": 125.964371,
      "lat": 9.26211
    }
  },
]
```

这是我的代码：

  ```
        
          const [value, setValue] = useState('')
          const [country, setCountry] = useState('')
          const [state,setState]=useState()
          var result
        
         
        
         const handleChange=(event)=>{
            setValue(event.target.value)
            if (event.target.value && event.target.value.length > 0) {
              conuntries(event.target.value)
            } else {
              setState({})
            }
        
        }
    const conuntries=(city)=>{
        const finalCity=
        city.charAt(0).toUpperCase() + city.slice(1)
        result=
        data.filter(d => d.name===finalCity)
        console.log('result', result)
        setState(result)
        console.log(state)
     
     }
    
    <View className="form-group">
              <TextInput placeholder='City' onChange={handleChange}value={value}
    
                name='city' type='text' className="form-control" />
            </View>
            <View className="form-group">`enter code here`
            <Picker
            selectedValue={country}
            onValueChange={(itemValue, itemIndex) => setCountry(itemValue)}
          >
          
          {state&& state.map(a => (
            <Picker.Item  key={`search-a-${a.id}`}style={styles.picker}label={a.country} value={a.country} />))}
           
            
          </Picker>
             
            </View>
    ```

标签： jsonreact-nativereact-hooks

解决方案

您可以通过以下代码解决它：

const [country, setCountry] = useState('')

const handleChange=(event)=>{
   if (event.target.value && event.target.value.length > 1) {
       conuntries(event.target.value)
    }
}
const conuntries=(city)=>{
    const finalCity= city.charAt(0).toUpperCase() + city.slice(1).toLowerCase();
    let result = data.filter(d => d.name===finalCity)
    if(result.length !== 0){
        setCountry(result)
        console.log(country)
    }
 
 }

如果您只想获取一个国家/地区，请假设可以有多个来自不同国家/地区的同名城市，那么您可以使用

let result = data.filter(d => d.name===finalCity)[0]

或最后一个

let result = data.filter(d => d.name===finalCity)
result = result[result.length -1]

或者您可以将其他自定义功能与Country状态一起使用

推荐阅读