Reactjs 在屏幕上显示类别名称

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

• id-自动增量
• 日期
• 数量
• 描述
• 猫咪

以及具有ff的类别表：

• id-自动增量
• 名字
• 数量

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

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

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);
    });
};

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

例如：

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

{categories.map（项=>{
返回{this.props.item.cat.name}；
}

---

因此，如果products表中的category\u id必须返回“none”，如果它不是空的，则必须从该div内的列表中返回category名称，该名称等于categories表的id……对不起，这里的新手。

没有完全理解，但是，我希望您尝试这样实现

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

{
categories.map（项目=>{
返回selectViaId（item.id）
? 
（{this.props.item.cat.name}）
: 
'';
}
}

因此，您有一个函数可以在回调中返回所需的数据

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 state即可

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”导入React；
从“path/to/this/function”导入{selectViaId}；
导出默认类示例扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
类别：[//设置初始值很重要
};
}
componentDidMount（）{
//你可能会在某个点击处理程序中这样做
selectViaId（4，categories=>this.setState（{categories}））；
}
render（）{
返回此.state.categories.map（项=>(
{this.props.item.cat.name}
));
}
}

请详细说明您当前问题中的代码有什么问题。它输出了什么或什么不起作用，以及您预期会发生什么。我正在尝试从类别表中选择与产品类别id相等的所有类别名称，然后将它们显示在我的div中。