根据React Native中TextInput的更改渲染视图

我正在尝试根据搜索查询动态显示事件列表。

问题是我一直在初始View上,而且从来没有调用renderSearch View。 PastEvent是一个由场景映射从类的主要修改器调用的函数 请检查代码中的注释。

  //to display the past events tab
  PastEvents = () => {
    const state = this.state;
    let myTableData = [];
    if (
      state.PastEventList.length !== 0
    ) {
      state.PastEventList.map((rowData) =>
        myTableData.push([
          this.renderRow(rowData)
        ])
      );
    }

    function renderPast() {
      console.log("im in render past") //shows
      return (
        <ScrollView horizontal={false}>
          <Table style={styles.table}>
            {myTableData.map((rowData, index) => (
              <Row
                key={index}
                data={rowData}
                style={styles.row}
                textStyle={styles.rowText}
                widthArr={state.widthArr}
              />
            ))}
          </Table>
        </ScrollView>

      )
    }

    function renderSearch() {
      console.log("im in render search") //never shows even after changing the text
      let searchTable = [];
      if (
        this.state.seacrhPastList.length !== 0
      ) {
        state.seacrhPastList.map((rowData) =>
          searchTable.push([
            this.renderRow(rowData)
          ])
        );
      }

      return (
        <ScrollView horizontal={false}>
          <Table style={styles.table}>
            {searchTable.map((rowData, index) => (
              <Row
                key={index}
                data={rowData}
                style={styles.row}
                textStyle={styles.rowText}
                widthArr={state.widthArr}
              />
            ))}
          </Table>
        </ScrollView>
      )
    }

    return (
      <View style={styles.container}>
        <TextInput placeholder="Search for Events" onChangeText={text => this.onChangeSearch(text)}></TextInput>

        {this.state.searching ? renderSearch() : renderPast()} //please check the onchangeSearch function
      </View>
    )
  }

变更的功能是这样的:

 onChangeSearch = (text) => {
    if (text.length > 0) {
      let jsonData = {};
      //get list of events 
      let url = "/api/FindEvents/" + text.toLowerCase()

      ApiHelper.createApiRequest(url, jsonData, true).then(res => {
        if (res.status == 200) {
          this.state.seacrhPastList = res.data
          this.state.searching= true //I was hoping this change will cause the render
        }
      })
        .catch(err => {
          console.log(err);
          return err;
        });
    }
  }

如何根据输入的查询更改事件?谢谢

评论