Question

我正在使用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;

Answer 1

我为您在codesandbox上做了一个有效的例子。我希望这有帮助。祝你的应用好运！

select选择onChange而不是onClick。

https://codesandbox.io/s/w25zwnnw8l

以下是React Selects的文档！

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

单击Reach JS替换变量中的值

1 个答案: