Question

这听起来像一个愚蠢的问题，但是......我开始使用JS / MySQL，我使用的是前端reactJS和后端nodeJS。我正在尝试使用MySQL数据库中的表中的值来创建一个选择表单。这可能是对的吗？

这是我的代码（使用反应组件，语义形式）

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”：“Alimentation”}，{“nom_categorie”：“Autres”}，{“nom_categorie”：“Cartes”}，{“nom_categorie”：“CD / DVD”}，{“nom_categorie” ：“控制台”}，{“nom_categorie”：“图片”}，{“nom_categorie”：“Informatique”}，{“nom_categorie”：“JeuxVidé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>
    )
  }
}

Answer 2

我试图使用MySQL数据库中的表中的值来创建一个选择表单。这可能是对的吗？

是的，这很有可能。

您拥有使其工作所需的大部分内容，但您缺少的是来自客户端的网络请求（即浏览器+反应代码）到您的服务器（即节点+快速）。 / p>

您的服务器代码完全正常：

app.get('/getCategories', function (req, res) {
    connection.query('SELECT nom_categorie FROM categories', function (error, results) {
      if (error) throw error;
     res.json(results);
  });
});

您应该通过在浏览器中调用您的终端来测试是否有效（例如http://localhost:8080/getCategories）。您应该在浏览器中看到普通的JSON。如果你没有，请解决原因。如果这不起作用，则您的应用无法加载数据。

您的客户端代码是您缺少对服务器的调用以获取该数据的地方（请记住，完整堆栈Web应用程序有两个部分）。

我会做这样的事情：

import * as React from 'react';

// you need a stateful component somewhere to fetch and update your data in app.
class MyForm extends React.Component {
  constructor() {
    super({});

    // give your component a default state
    this.state = {
      items: [],
    };
  }

  // use the componentDidMount hook to run as soon as the component is mounted to the DOM
  async componentDidMount() {
    // use the fetch API to make the call from client to server
    const response = await fetch('/getCategories');
    const newList = await response.json();
    this.setState(previousState => ({
      ...previousState,
      list: newList,
    }));
  }

  render() {
    return <Form.Field id='categories' fluid label='Catégories' control='select'>
      {this.state.items.map(obj => obj.nom_categorie).map((item, index) => <option
        key={index}
        value={index}
      >{item}</option>)}           
    </Form.Field>;
  }
}

所以策略是：

通过浏览器测试确保您的终端正常工作
create a stateful react component，初始状态为空数组
创建一个渲染函数，使用this.state.items映射items数组以响应DOM节点
使用componentDidMount lifecycle hook使用fetch API调用您的服务，并在完成后更新组件的状态。

希望这会有所帮助。祝你好运！

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

2 个答案: