javascript - 使用 NodeJS 数据库中的选项值选择表单

Question

这听起来像是一个愚蠢的问题，但是..我从 JS/MySQL 开始，并且使用前端 ReactJS 和后端 NodeJS。我正在尝试使用 MySQL 数据库中的表中的值创建一个选择表单。这应该是可能的吧？

这是我的代码(使用 react 组件，semantic-ui 表单)

class FormulaireCreerCollection extends Component {

  constructor() {
    super();

    this.state = {
      categories: []
    }
  }

  async componentDidMount() {
    const response = await fetch('http://localhost:3004/getCategories');
    const newList = await response.json();
    this.setState(previousState => ({
      ...previousState,
      categories: newList,
    }));
  }

  createOptions() {
    return this.state.categories.map((categorie, index) => <option key={index} value={index}>{categorie}</option>);

  }

  state = {}

  handleChange = (e, { value }) => this.setState({ value })

  render() { 
    const { value } = this.state
    return (
      <Form>
        <Form.Group widths='equal'>
          <Form.Field id='categories' fluid label='Catégories' control='select'>
              {this.createOptions()}
          </Form.Field>
          <Form.Input id='objet'fluid label="Nom de l'objet" placeholder="Nom de l'objet"  />
          <Form.Input id='image' fluid label="Image de l'objet" placeholder="Image de l'objet"  />

        </Form.Group>

        <Form.TextArea id='descObj' label="Description de l'objet" placeholder="Dites-en nous plus sur l'objet.." />
        <Form.Button onClick={this.handleClick}>Ajouter l'objet à la collection</Form.Button>

      </Form>
    )
  }
}

export default FormulaireCreerCollection;

我想做的是例如选项{表中的第一个值}然后选项{表中的第二个值}等..

这听起来很愚蠢，但我还没有找到答案。谁能帮我吗？

这是我的 json 输出:

[{"nom_categorie":"营养"},{"nom_categorie":"Autres"},{"nom_categorie":"Cartes"},{"nom_categorie":"CD/DVD"},{"nom_categorie":"控制台"},{"nom_categorie":"图像"},{"nom_categorie":"Informatique"},{"nom_categorie":"Jeux Vidéos"},{"nom_categorie":"Livres"},{"nom_categorie"":"Moyens de locomotion"},{"nom_categorie":"Outillage"},{"nom_categorie":"Son"},{"nom_categorie":"Vêtements"}]

Answer 1

我在下面展示了一些基本想法。适应您自己的使用。
(另外，我相信你在后端使用 Express 和 mysql.js)

// in React
class WhatEver {
  constructor() {
    this.state = {
      categories: []
    }
  }
  
  componentDidMount() {
    // do AJAX call here
    someAjaxCall(..., (results) => {
      // This only shows the idea, do your own result processing instead and then setState
      this.setState({
        categories: results
      }) // triggers rerender
    })
  }
  
  createOptions = () => {
    return this.state.categories.map((e) => <option value={e} key={/* some unique key */}>{/* some name */}</option>)
  }
  
  render() {
    return (
      <Form.Field id='categories' fluid label='Catégories' control='select'>
        {this.createOptions() /* spread array elements in this way */}          
      </Form.Field>
    )
  }
}