在搜索中输入内容时,如何更新列表?

时间:2019-01-09 10:07:41

标签: android json reactjs react-native

    size segment_size1 segment_size2 segment_size3 segment_size4 segment_size5
       text    data     bss     dec     hex filename
       1217     560       8    1785     6f9 segment_size1
       1217     560       8    1785     6f9 segment_size2
       1217     564      12    1793     701 segment_size3
       1217     564      12    1793     701 segment_size4
       1217     568      16    1801     709 segment_size5

每当在搜索框中输入内容时,如何使用搜索功能更新列表?

这就是我在TextInput(SearchBox)中正在尝试的操作。

 search = () => {
      fetch(strings.baseUri+"search_by_name", {
       method: 'POST',
       headers: {
              Accept: 'application/json',
              'Content-Type': 'application/json'
            },
            body: JSON.stringify({ 
              "name": this.state.name,
            })
          })
          .then((response) => response.json())
          .then((responseJson) => {

             this.setState({data: responseJson});     

         })
          .catch((error) => {
              console.error(error);
          });    
      }

2 个答案:

答案 0 :(得分:1)

首先search = () => { fetch(strings.baseUri+"search_by_name", { method: 'POST', headers: { Accept: 'application/json', 'Content-Type': 'application/json' }, body: JSON.stringify({ "name": this.state.name, }) }) .then((response) => response.json()) .then((responseJson) => { this.setState({data: responseJson}); }) .catch((error) => { console.error(error); }); } 是一个实际的json对象,您不需要先对其进行字符串化然后再对其进行解析。

您可以将responseJson存储在状态中

constructor(props) {
  super(props);
  this.state = { data: [] }
}

只需确保在组件的构造函数中设置了初始状态

this.state.data

然后,您应该可以使用search = (name) => { fetch(strings.baseUri+"search_by_name", { method: 'POST', headers: { Accept: 'application/json', 'Content-Type': 'application/json' }, body: JSON.stringify({ "name": name, }) }) .then((response) => response.json()) .then((responseJson) => { this.setState({data: responseJson, name: name}); }) .catch((error) => { this.setState({name: name}); console.error(error); }); }

来访问数据

更新后的问题的答案

问题是您没有意识到setState是异步的。状态更新需要时间。这意味着您要设置状态,然后希望在下一个函数调用时状态已更新。不幸的是,在TextInput中调用setState效果不理想。

我会将您的搜索功能更新为以下内容

TextInput

然后在您的<TextInput style={styles.searchInput} placeholder="Search" placeholderTextColor={colors.whiteColor} onChangeText={ name => { if (name.length > 0) { this.search(name); } else { this.setState({data: [], name: ''}); } } } /> 中将函数调用更新为

scipy.stats.binned_statistic_2d()

这将减少setState的调用次数。

答案 1 :(得分:0)

嗯... 我不确定什么是“身体”部分。 我的意思是那部分 正文:JSON.stringify({“ name”:this.state.name}) 也许更好 正文:[{'name':bla}]吗?

无论如何,尝试使用此方法(并将“ Accept”标头写为字符串): (如果对您来说很重要,请添加身体部位)

const fetchConfig = {
    method: 'POST',
    headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
    }
}
fetch(strings.baseUri+"search_by_name",fetchConfig)
.then((response) => {
    //use *return* statement to return a json object to THEN part
    return JSON.parse(response)
})
.then((responseJson) => {
    let jsonObj = responseJson;//responseJson is *already* a JSON object.
    //you cannot alert a JSON data, it's will show as [object]
    //you can do console.log() or 
    //console.warn() <--- this will showed on device in yellowbox, but i'm not sure about a json data.
})