React - prop数组值

Question

这是我的 SearchForm.js 类，experience道具必须是包含id和name的值数组

import React from 'react';
import ReactDOM from 'react-dom';
import axios from 'axios';

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

      this.state = {
       position: '',
       area: '',
       date: '',
       experience: {
            type: Array,
            default: () => []
          }  
      }        
     }

    componentDidMount() {
        axios({
            method: 'GET',
            url: 'https://example.com/dictionaries/', 
            headers: { 
                'User-Agent': 'React App/1.0 (myemail@gmail.com)', 
                'HH-User-Agent': 'React App/1.0 (myemail@gmail.com)',  
                'Content-Type':'application/x-www-form-urlencoded',
            }
            })
          .then(function (response) {
            console.log(response.data.experience);
          })
          .catch(function (error) {
            console.log(error);
          });
    }


    render() {
        return ( 
            <form className='form search-form' onSubmit={this.handleSubmit}>
                <div className="form-row">         
                    <div className="form-group col-md-2">
                        <label htmlFor="experience">Experience</label>
                        <select className="form-control" name="experience" id="experience" onChange={this.handleExperienceChange} value={this.state.experience}>
                {/* <option key={this.props.experience.id} value={this.props.experience.name}>
                            {this.props.experience.name}
                        </option> */}
                        </select>
                    </div>
                </div>  
            </form>
        )
    }
}

export { SearchForm }

结果我得到了

如何将response.data.experience中的这些值放在experience prop？

中

Answer 1

您可以更改状态

composer.phar

您可以使用以下代码遍历axios({ method: 'GET', url: 'https://example.com/dictionaries/', headers: { 'User-Agent': 'React App/1.0 (myemail@gmail.com)', 'HH-User-Agent': 'React App/1.0 (myemail@gmail.com)', 'Content-Type':'application/x-www-form-urlencoded', } }).then((response) => { console.log(response.data.experience); this.setState({experience: response.data.experience}) }).catch(function (error) { console.log(error); }); 数组：

experience

Answer 2

体验处于您的状态，因此您必须使用setState方法，如：

.city, .country, .name, .state, .street and .zip

Answer 3

此解决方案适合您吗？让我知道！

修改：如果您的<option>尚未定义，则为experience添加条件呈现

import React from "react";
import ReactDOM from "react-dom";
import axios from "axios";

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

    this.state = {
        position: "",
        area: "",
        date: "",
        experience: {
            type: Array,
            default: () => [],
        },
    };
}

componentWillReceiveProps = NextProps => {
    if (NextProps.experience !== this.props.experience) {
        this.setState({ experience: NextProps.experience });
    }
};

componentDidMount() {

    axios({
        method: "GET",
        url: "https://example.com/dictionaries/",
        headers: {
            "User-Agent": "React App/1.0 (myemail@gmail.com)",
            "HH-User-Agent": "React App/1.0 (myemail@gmail.com)",
            "Content-Type": "application/x-www-form-urlencoded",
        },
    })
        .then(response => {
            console.log(response.data.experience);
            this.setState({ experience: response.data.experience });
        })
        .catch(function(error) {
            console.log(error);
        });
}

render() {
    return (
        <form className="form search-form" onSubmit={this.handleSubmit}>
            <div className="form-row">
                <div className="form-group col-md-2">
                    <label htmlFor="experience">Experience</label>
                    <select
                        className="form-control"
                        name="experience"
                        id="experience"
                        onChange={this.handleExperienceChange}
                        value={this.state.experience}
                    >
                        {this.state.experience.length > 0 && 
                        <option
                            key={this.state.experience.id}
                            value={this.state.experience.name}
                        >
                            {this.state.experience.name}
                        </option> }
                    </select>
                </div>
            </div>
        </form>
    );
}
}