Question

我有一个产品表，其中包含ff：

id - AUTO_INCREMENT
日期
金额
描述
CAT_ID

和一个包含ff：

的类别表

id - AUTO_INCREMENT
名称
金额

现在在我的反应应用程序上，我正在尝试拉出一个select语句，该语句将类别名称显示给给定的类别名称列表。默认情况下，如果产品表中没有插入类别，则必须返回任何类别。

所以我创建了一个辅助函数：

const selectViaId = function(id){
  sequelize.query('SELECT categories.name FROM `categories` LEFT JOIN products on products.category_id = categories.id', { type: sequelize.QueryTypes.SELECT})
    .then(catnames => {
      callback(catnames);
    });
};

如何在select语句中列出所有这些类别名称，这些名称在react中使用了两个表？

例如：

{ categories.map(item => {
  return <div className="cat-name">{this.props.item.cat.name}</div>;
}

因此，如果product表中的category_id必须返回＆＃34; none＆＃34;如果它不是空的，它必须从该div中的列表中返回类别名称，该列表等于cateogories表的id ....抱歉新手在这里。

Answer 1

然而，还没有完全理解，我希望你试图像这样实施？

{ 
 categories.map(item => {
   return selectViaId(item.id) 
     ? 
   (<div className="cat-name">{this.props.item.cat.name}</div>) 
    : 
   '';
 }
}

Answer 2

所以你有一个函数可以在回调中返回所需的数据。

export const selectViaId = function(id, callback){
  sequelize.query('SELECT categories.name FROM `categories` LEFT JOIN products on products.category_id = categories.id', { type: sequelize.QueryTypes.SELECT})
    .then(catnames => {
      callback(catnames);
    });
};

如果我现在理解正确，您只需要在组件中使用它。使用React状态来执行此操作。

import React from "react";
import { selectViaId } from "path/to/this/function";

export default class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      categories: [] // important to set initial value
    };
  }

  componentDidMount() {
    // you will probably gonna do this in some click handler 
    selectViaId(4, categories => this.setState({ categories }));
  }

  render() {
    return this.state.categories.map(item => (
      <div className="cat-name">{this.props.item.cat.name}</div>
    ));
  }
}

在React上显示类别名称

2 个答案: