Блог

Как использовать объект в функции фильтра react-native? В принципе, у меня есть автозаполнение в моем приложении react native, поэтому я использую пакет ввода react-native-автозаполнения, и данные, которые я получил с сервера, являются объектами, а данные таковы

 "student": [
  {
    "id": 1,
    "name": "roger",
    "created_at": "2021-03-04T13:02:11.000000Z",
    "updated_at": "2021-03-04T13:02:11.000000Z"
  },
  {
    "id": 2,
    "name": "federe",
    "created_at": "2021-03-04T13:02:11.000000Z",
    "updated_at": "2021-03-04T13:02:11.000000Z"
  },
...
 

и мое автозаполнение выглядит так

 <Autocomplete
  autoCapitalize="none"
  autoCorrect={false}
  data={this.state.student}
  listViewDisplayed="auto"
  // Default value if you want to set something in input
  defaultValue={
    this.state.selectedstudent === '' ?
    '' :
    this.state.selectedstudent.name
  }
  // Onchange of the text changing the state of the query
  // Which will trigger the findstudent method
  // To show the suggestions
  onChangeText={(text) => this.findstudent(text)}
  placeholder="Enter Student Name"
  renderItem={({ item }) => (
    // For the suggestion view
    <TouchableOpacity
      onPress={() => {
        this.setState({ selectedstudent: item });
        this.setState({ filteredstudent: '' });
      }}>
      <Text style={{ color: red }}>
        {item}
      </Text>
    </TouchableOpacity>
  )}
/>
 

при изменении функция выглядит так

 findstudent = (query) => {
  // Method called every time when we change the value of the input
  if (query) {
    // Making a case insensitive regular expression
    const regex = new RegExp(`${query.trim()}`, 'i');
    // Setting the filtered student array according the query
   this.setState({ filteredstudent: this.state.student.filter((text) => text.name.search(regex) >= 0) });
    } else {
      // If the query is null then return blank
      this.setState({ filteredstudent: '' });
      console.log(this.state.filteredstudent)
    }
  }
 

Но это приводит меня к такой ошибке

 Error: Objects are not valid as a React child (found: object with keys {id, name, create_at,updated_at}). If you meant to render a collection of children, use an array instead.
 

SO I just want to show the name of the student in autocomplete input and when he select any user, send his id to my server through the fetch method