Как передать переменную в URL-адресе API в React native?

Question

Я создаю панель поиска в своем приложении и хочу, чтобы URL-адрес был изменен в соответствии с пользовательским вводом. Пользователь вводит имя, то есть: 'Джон' . в этой функции ниже я добавил имя для тестирования вручную.

Как я могу сделать так, чтобы эта функция принимала переменную для вставки в URL вместо 'John', чтобы получить ввод пользователя из функции TextInput

search:

 search(){
    return fetch('http://10.0.2.2:3333/api/v0.0.5/search_user?q=John')
    .then((response) => response.json())
    .then((responseJson) => {
    this.setState({
    isLoading: false,
    userInfo: responseJson,
    });
    })
    .catch((error) =>{
    console.log(error);
    });
  }

Ввод текста:

<TextInput style = {styles.input} placeholder="Search for users" onChangeText={this.handleSearch} 
value={??}/>

Answer 1

Получите имя из состояния, предполагая, что handleSearch сохранит значение как this.setState({ name: value}), добавьте значение в URL, используя строки шаблона.

search = () => {
  return fetch(`http://10.0.2.2:3333/api/v0.0.5/search_user?q=${this.state.name}`)
    .then(response => response.json())
    .then(responseJson => {
      this.setState({
        isLoading: false,
        userInfo: responseJson,
      });
    })
    .catch(error => {
      console.log(error);
    });
}

Значением для ввода будет значение из состояния, будучи установить в handleSearch.

<TextInput style = {styles.input} placeholder="Search for users" onChangeText{this.handleSearch} value={this.state.name}/>

handleSearch = (value) => {

 this.setState({ name: value}, this.search)
}