Рендеринг представлений на основе изменения TextInput в реагировать родной - PullRequest
Новая
       6

Рендеринг представлений на основе изменения TextInput в реагировать родной

0 голосов
/ 24 апреля 2020

Я пытаюсь динамически отображать список событий, основанных на поисковом запросе.

Проблема в том, что я всегда в исходном представлении, а представление renderSearch никогда не вызывается. PastEvent - это функция, вызываемая из основного редактора класса с помощью mapmap. Пожалуйста, проверьте комментарии в коде. 

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

Как можно изменить события на основе запроса ввода? Спасибо

Ответы [ 2 ]

1 голос
/ 24 апреля 2020

Вы находитесь в компоненте без состояния, вы не должны использовать «это» каким-либо образом, также вы не можете использовать состояние таким образом, вам нужно использовать реакционные хуки 

Import { useState } from 'react'

Тогда вы можете использовать состояние в функциональном компоненте 

const [state, setState] = useState(initialvalue);
1 голос
/ 24 апреля 2020

вам нужно использовать useState здесь

объявить useState следующим образом: 

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

изменить здесь состояние поиска: 

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

Надеюсь, это поможет!

...