基於 React Native 中 TextInput 的變化渲染視圖

Question

我正在嘗試根據搜索查詢動態顯示事件列表。

問題是我總是在初始視圖上，並且從未調用過 renderSearch 視圖。 PastEvent 是一個 function，由 scenemap 從 class 的主要 redner 調用請檢查代碼中的注釋。

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

而變化的function是這樣的：

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

我如何根據輸入的查詢更改事件？ 謝謝

Answer 1

你需要在這里使用 useState

像這樣聲明 useState ：

 PastEvents = () => {
    const [searching, setText] = useState(false);

在此處更改搜索 state：

if (res.status == 200) {
          this.state.seacrhPastList = res.data
          setText(true);
        }

希望這可以幫助！

Answer 2

你在一個無狀態的組件中，你不應該以任何方式使用“this”，你也不能那樣使用 state，你需要使用 react hooks

Import { useState } from 'react'

然后你可以在功能組件中使用 state

const [state, setState] = useState(initialvalue);