0

Подскажите, пожалуйста, как передать в запрос axios вводимое значение? Вместо 'react' необходимо, чтобы значение value из 'TextField' тут же передавалось в 'q:'? То есть чтобы при изменении поля каждый раз посылался запрос

list.js

constructor(){
        super();
        this.state = {
            users: [],
            value: ''
        }
    }
    componentDidMount(){
        API.getUsers().then((allUsers) => {
            console.log(allUsers);
            this.setState({
                users: allUsers
            })
        });
    }
    handleChange = (event) => {
        this.setState({
            value: event.target.value,
        });
        console.log(this.state.value);
    };
    render(){
        return(
            <div>
                <div>
                    <TextField
                        floatingLabelText="Search"
                        id="text-field-controlled"
                        value={this.state.value}
                        onChange={this.handleChange.bind(this)}
                    />
                    <p>{this.state.value}</p>
                </div>
                {
                this.state.users.map((user) => {
                    return <div key={user.id}>
                        <Users/>
                    </div>
                })
            }
            </div>
        )
    }

api.js

let API = {
    getAllUsers: function () {
        console.log(this.props.params.login);
        return new Promise(function (resolve, reject) {

            axios.get('https://api.github.com/search/repositories', {
                params: {
                    q: 'react',
                    per_page: 20
                }
            }).then(function (allUsers) {
                resolve(allUsers.data.items);
                console.log(allUsers.data.items)
            })
        })
    }
}

1 ответ 1

1

Так через handleChange и передавайте значения и в нем же через .then() меняйте setState.

handleChange = (event) => {
        this.setState({
            value: event.target.value,
        });
        API.getAllUsers(event.target.value).then(allUsers => {
           setState(
              users: allUsers
           )
        }
    };

Переделайте так, чтоб getAllUsers возвращал промис.
Вы используете стрелочную функцию в классе, поэтому биндить не нужно.
Так же используйте debounce, чтоб не посылать слишком часто запрос.

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.