Ich habe ein Problem mit einer indirekten Kommunikation in React Native.

Ich habe eine übergeordnete Komponente, die eine Komponente pro Klasse ist. Und ich habe eine untergeordnete Komponente, die eine funktionale Komponente ist.

Elternteil:

constructor(props) {
  super(props);

  this.state = {
    search: '',
  };
 }

getInfoSearch(userSearch) {
 this.setState({
   search: userSearch
 })
}

render(){
  return(
   <SearchHeader placeholder={'Buscar procedimento'} getValueUserSearch={this.getInfoSearch}/>
  )
}

Kind:

import React, {useState} from 'react';
import {View, TextInput} from 'react-native';

const SearchHeader = props => {
  const [search, setSearch] = useState('');

  const {placeholder, getValueUserSearch} = props;

  const handleSearch = (search) => {
    console.log(this);
    setSearch(search);
    getValueUserSearch(search);
  };

  return (
    <View>
      <TextInput placeholder={placeholder || 'Buscar'} onChangeText={handleSearch}/>
    </View>
  );
};

export default SearchHeader;

Wenn ich jedoch Text in den InputText eingebe, tritt ein Fehler auf. Daraus geht Folgendes hervor:

"Ich kann die setState-Funktion von undefined nicht anwenden."

Wissen Sie, wie ich dieses Problem lösen könnte? Weil ich den Suchstatus im übergeordneten Element ändern möchte.

0
Thadeu Munhóz Cesário 19 Aug. 2020 im 20:39

2 Antworten

Beste Antwort

Der Fehler kann an der Zeile this.setState in der Funktion getInfoSearch liegen.

Versuchen Sie es mit arrow function oder führen Sie die explizite Bindung in constructor wie unten beschrieben durch

constructor(props) {
  ...
  this.getInfoSearch = this.getInfoSearch.bind(this);
}

(Oder)

getInfoSearch = (userSearch) => {
  this.setState({ search: userSearch });
}

Weitere Informationen finden Sie unter hier.

1
Prathap Reddy 19 Aug. 2020 im 17:55

Dies liegt daran, dass Sie kein Argument an die Funktion handleSearch übergeben. Es sollte Folgendes sein:

 onChangeText={(event) => handleSearch(event.target.value}
0
wyfy 19 Aug. 2020 im 17:43