Question

我想根据选定的作业ID提取数据。应从下拉列表中选择作业ID。一旦选择了作业ID，就应该使用属性作业ID来调整api网址。

我添加了select选项和fetch语句。但是我无法在url中传递参数。

const jsonify = res => res.json();

 var chart_request = new Request(
    `https://xxxx.com/prod/job-id?job_id_number=${this.state.selectVal}`, 
    {
        method: 'GET',
        headers: new Headers({
            'Content-Type': 'application/json'
        })
    }
); 

const dataFetch = fetch(chart_request).then(jsonify);

export default class ZYZ extends Component {

    constructor(props) {
        super(props);
        this.state = {                                          
            selectVal : "650"
        }
    }

    setSelectValue = (event) => {
        this.setState({
            selectVal: event.target.value
        });                                                                            
    }

    render() {
        return
            <React.Fragment>
                <select value={this.state.selectVal} onChange={this.setSelectValue}>
                    <option value = "650">650</option>
                    <option value = "1052">1052</option>
                </select> 
                <p>{this.state.selectVal}</p>
            </React.Fragment>
    }
}

Answer 1

您不能在课堂外使用自己的状态。

但是，如果您坚持要这样做，则可以分别在初始加载和每次选择时使用componentDidMount和componentDidUpdate生命周期方法，并将id作为参数传递给fetchData和chart_request，如下所示：

componentDidMount() {
    // calling fetch, resolving the promise, and storing the data in state
    fetchData(this.state.selectVal).then(data => this.setState({ data }));
}

componentDidUpdate() {
    // same as above
    fetchData(this.state.selectVal).then(data => this.setState({ data }));
}

对chart_request和fetchData的修改：

const chart_request = id =>
    fetch(
        `https://xxxx.com/prod/job-id?job_id_number=${id}`
    )
        .then(response => response.json()) // instead of "jsonify" 
        .then(data => JSON.stringify(data))
        .catch(error => error);

const fetchData = id => chart_request(id);

我修改了，以便您可以测试输出。

如何根据所选选项在api网址中传递参数？

1 个答案: