javascript - 如何让选择器在 React 中处理琐事游戏？

Question

我正在使用 Open Trivia Database API 制作一个琐事游戏，我正在尝试获取它，因此有一个选择器按钮，当它下拉时，它会显示一个类别列表，当你点击它时，它会给出你来自上述类别的问题。我觉得我很接近，但只是错过了一块，想知道是否有人能发现它或只是指出我正确的方向？提前感谢您的时间和帮助。
这是我的 app.js 代码:

import React from 'react'
import './App.css'
// import axios from 'axios'
import Questions from './components/questions'
import Categories from './components/categories'
import categorySelector from './components/categorySelector'

class App extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      questions: [],
      categories: []
      // score: 0,

    }
  }

  render () {
    return (
      <div className='App'>
        <h2>Trivia Game</h2>
        <categorySelector
          categories={Categories}
          onSelect={event => this.questions(event.target.value)}
        />

      </div>
    )
  }
}
export default App

这是我的 categorySelector.js 代码:

import React from 'react'

class categorySelector extends React.Component {
  render () {
    const { categories, onSelect } = this.props

    return (
      <div class='categorySelector'>
        <select
          value={categories} onChange={onSelect}
        >
          <option value=''>-- No category selected --</option>
          {categories.map(category => (
            <option value={category} key={category.id}>{category.name}</option>
          ))}
        </select>
      </div>
    )
  }
}

export default categorySelector

Answer 1

看起来 select 标签没有 value 属性:https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select
我修改了你的退货声明如下

将“class”更改为“className”，因为 class 是 Reactjs 中的保留关键字

从选择标签中删除 value prop

将选项标签中的值属性更新为类别名称而不是对象

    return (
      <div class='categorySelector'>
        <select onChange={onSelect}>
          <option value=''>-- No category selected --</option>
          {categories.map(category => (
            <option value={category.name} key={category.id}>{category.name}</option>
          ))}
        </select>
      </div>
    )

我还建议大写 react 类名称，例如 CategorySelector 而不是 categorySelector。
App 组件中有几个错字

您将 Categories 组件作为 Prop 传递，而不是传递状态的类别切片。

在 onSelect 事件中， this.questions(...) 暗示您正在调用一个方法。但是，您似乎没有编写问题方法。
相反，如果您想在问题列表中“保存”所选类别，您可以像这样调用 setState:

括号内的代码添加选定的值而不删除以前的选择。

  <categorySelector
    categories={this.categories}
    onSelect={event => this.setState({questions: [...this.state.questions, event.target.value]})}
  />