时间戳

首页 > 解决方案 > 单击Reach JS替换变量中的值

javascript - 单击Reach JS替换变量中的值

问题描述

我正在使用 thmdb api 制作一个随机电影生成器。当按流派排序时，api 需要一个包含所有流派 id 的字符串来排除，因此它会返回我们要搜索的流派的结果。我正在使用 axios 发出 http get 请求。

我已经能够返回一次结果，但是如果用户决定选择另一种类型，它会将新字符串堆叠在旧字符串之上。

我的障碍不是将新字符串堆叠在现有字符串上，而是希望它在每次单击后替换变量中的内容。有什么建议吗？

import React, { Component } from 'react';

import axios from 'axios';

import './genres.css';

class genres extends Component {
state = {
    title: [],
    genres: []
}

async componentDidMount() {
    const response = await axios.get('https://api.themoviedb.org/3/genre/movie/list?api_key=34651b29c2c31f97c875d1f83f8f1d6d&language=en-US');
    this.setState({genres: response.data.genres});
    console.log(this.state.genres);
}

render() {
    const genres = this.state.genres.map(genre => {
        return <option key={genre.id} value={genre.id}>{genre.name}</option>
    })
    let sel = document.getElementById('genre_selector')


    let opt = ''
    let array = this.state.genres
    let index = []
    let selOpt = ''
    let toRemove = ''
    let genreFilter = ''

    const genreClickHandler = () => {
        opt = sel.options[sel.selectedIndex]
        selOpt = Number(opt.value)

        for(let i = 0; i < array.length; i++){
            index.push(this.state.genres[i].id)
        }

        toRemove = index.indexOf(selOpt)
        index.splice(toRemove, 1)
        index.join('%')
        genreFilter = index.join('%').toString()

        console.log(genreFilter)            
    }

    const selector = <select 
                        onClick={genreClickHandler} className="custom-select" id="genre_selector">

                            <option>Genres...</option>
                                    {genres}
                    </select>

    return (
        <div className="App">
            {selector}
        </div>
    );
}
}

export default genres;

标签： javascriptreactjsonclickaxioses6-promise

解决方案

我在代码沙盒上为您做了一个工作示例。我希望这有帮助。祝你的应用好运！

选择需要 onChange 而不是 onClick。

https://codesandbox.io/s/w25zwnnw8l

这是有关 React Selects 的文档！

https://reactjs.org/docs/forms.html#the-select-tag

推荐阅读