在axios中渲染React组件

Heidel 发表于 Dev

海德尔

我刚刚开始学习React，我正在尝试制作一个简单的应用程序，以使用第三方服务器API搜索空缺职位。该应用程序由form一个组成input，在submit其上使用发送请求到服务器axios，获取响应并必须呈现它。

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import "bootstrap/dist/css/bootstrap.css";
import axios from 'axios';

const instance = axios.create({
  baseURL: 'https://api.hh.ru/vacancies/',
  headers: {
        'User-Agent': 'React App/1.0 ([email protected])', 
        'HH-User-Agent': 'React App/1.0 ([email protected])'
    }
});

const Header = () => {
    return <h1>Поиск вакансий на HH.ru</h1>
}

const Vacancies = props => {
    return <div>Some Text</div>
}

class SearchForm extends React.Component {
    constructor(props) {
        super(props)

        this.state = {
            position: ''
        }

        this.handlePositionChange = this.handlePositionChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }

    handlePositionChange(e) {
            this.setState({
                [e.target.name]: e.target.value
            });
        }

    handleSubmit(e) {
        e.preventDefault();

        var formButton = document.getElementById('form-button');
        formButton.disabled = true;

        var position = this.state.position;
        console.log(position);

        if ( position ) {
            instance({
                    method: 'GET',
                    url: '?text=' + position,
                    data: {
                        position: position
                    }
                })
                .then(function(response) {
                    console.log(response.data);
                    formButton.disabled = false;
            })
               .catch(function (error) {
                console.log(error);
              });
        } else {
            formButton.disabled = false;
        }
    }

    render() {
        return (
            <form className="form search-form" onSubmit = { this.handleSubmit }>
                <div className="form-row">
                    <div className="form-group col-md-8">
                        <label htmlFor="position"> Position *
                            < /label>
                                <input type="text" className="form-control" name="position" id="position" placeholder="Position" onChange={ this.handlePositionChange } value={ this.state.position } />
                    </div>

                    <div className="form-group col-md-4 d-flex flex-column justify-content-end">
                        <input id = 'form-button'
                        className = 'btn btn-primary'
                        type = 'submit'
                        placeholder = 'Send' / >
                    </div>
                </div>
            </form>
        )
    }
}

class App extends Component {
  render() {
    return (
      <div className="container">
        <div className="row">
            <div className="col-12">
                <Header />
                <SearchForm />
                <Vacancies />
            </div>
        </div>
      </div>
    );
  }
}

export default App;

我在渲染方面遇到问题<Vacancies />，是否可以动态渲染它并在每次来自服务器的每次新请求和响应时更新数据？

Shubham Khatri

空缺需要的是从SearchForm获得API请求后得到的更新数据，在这种情况下，您需要重组组件并在父级中提升操作并将数据作为道具传递给同级组件

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import "bootstrap/dist/css/bootstrap.css";
import axios from 'axios';

const instance = axios.create({
  baseURL: 'https://api.hh.ru/vacancies/',
  headers: {
        'User-Agent': 'React App/1.0 ([email protected])', 
        'HH-User-Agent': 'React App/1.0 ([email protected])'
    }
});

const Header = () => {
    return <h1>Поиск вакансий на HH.ru</h1>
}

const Vacancies = props => {
    return <div>Some Text</div>
}

class SearchForm extends React.Component {
    constructor(props) {
        super(props)

        this.state = {
            position: ''
        }

        this.handlePositionChange = this.handlePositionChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }

    handlePositionChange(e) {
            this.setState({
                [e.target.name]: e.target.value
            });
        }

    render() {
        return (
            <form className="form search-form" onSubmit = { (e) => this.handleSubmit(e, this.state.position) }>
                <div className="form-row">
                    <div className="form-group col-md-8">
                        <label htmlFor="position"> Position *
                            < /label>
                                <input type="text" className="form-control" name="position" id="position" placeholder="Position" onChange={ this.handlePositionChange } value={ this.state.position } />
                    </div>

                    <div className="form-group col-md-4 d-flex flex-column justify-content-end">
                        <input id = 'form-button'
                        className = 'btn btn-primary'
                        type = 'submit'
                        disabled={this.props.disableSubmit}
                        placeholder = 'Send' / >
                    </div>
                </div>
            </form>
        )
    }
}

class App extends Component {
      state = {
        disableSubmit: false;
      }
      handleSubmit = (e, position) => {
        e.preventDefault();

        this.setState({disableSubmit : true});
        console.log(position);

        if ( position ) {
            instance({
                    method: 'GET',
                    url: '?text=' + position,
                    data: {
                        position: position
                    }
                })
                .then(function(response) {
                    this.setState({data: response.data, disableSubmit:false});
            })
               .catch(function (error) {
                console.log(error);
              });
        } else {
            this.setState({disableSubmit : false});
        }
    }
  render() {
    return (
      <div className="container">
        <div className="row">
            <div className="col-12">
                <Header />
                <SearchForm handleSubmit = {this.handleSubmit} disableSubmit={this.state.disableSubmit}/>
                <Vacancies data={this.state.data}/>
            </div>
        </div>
      </div>
    );
  }
}

export default App;

同样，在使用React时，必须确保自己不要修改DOM元素，并以React方式处理所有交互。例如，您可以使用道具或状态来控制提交按钮的禁用状态。

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。