Question

我有一个帮助函数，基本上选择基于产品的名称在产品category_id和类别表中的id：

const selectName = function(id){
  sequelize.query(`SELECT c.name FROM categories as c WHERE EXISTS (SELECT 1 FROM product as p WHERE c.id = '${id}')`, { type: sequelize.QueryTypes.SELECT})
    .then(cnames => {
      console.log('cnames via id >>>>>>>', cnames)
    });
};

如果传入的id等于类别的id，则上面的代码将返回一个名称。

然后在我的快递文件中，我将其设置为在我的反应前端调用它：

app.post('/api/selectName', (req, res) => {
  helper.selectName(req.body.category_id);
  res.end();
});

根据我的反应，我已经设置了一个功能，用于提取包含名称，数量的产品列表，其中包含category_id

class App extends React.Component {

  constructor(props) {
    super(props);

    this.state = {
      pdata: [],
    };

    this.selectName= this.selectName.bind(this);
  }

  pullProducts() {
    axios
      .get('/api/products')
      .then(myData => {
        this.setState({
          pdata: myData.data
        });
      })
      .catch(err => console.log(err));
  }


  componentDidMount() {
    this.pullProducts();
  }

我还尝试使用selectName函数来调用我在上面创建的函数：

 selectName(id){
    axios
      .post('/api/selectName', {
        category_id: id
      })
      .then( () => this.pullProducts() )
      .catch(err => console.log(err));
  }

我希望此函数将根据传递的category_id返回类别的名称，并将检查类别和id中的等效ID并返回名称。

所以在我的productlist组件中，我传递了这个函数：

   <TransactionList tdata={this.state.cdata} selectName={this.selectName}/>

然后在实际的组件中，我试着调用functin进行选择：

    <div className="c-data">{this.props.item.pname}</div>
    <div className="c-data">{this.props.item.amount}</div>
   <div className="c-data">{this.selectName(this.props.item.category_id)}</div>

但它刚刚返回一个错误w / c说：TypeError：this.selectTransactionViaCategoryId不是函数

我的目标：在我调用函数的div中，我想返回传入等效id的类别的名称。如果该行中没有category_id，则必须显示“NO ID”。< / p>

我如何完成内部反应？我究竟做错了什么？如何处理条件，如果该行中没有category_id，它必须显示“NO ID”？

抱歉新手在这里。

Answer 1

可以帮助你做你想做的事情：

TransactionList内部你应该使用this.props.selectName 而不是this.selectName（除非你的组件中有一个字段叫selectName）
执行此操作时：<div className="c-data">{this.selectName(this.props.item.category_id)}</div>您希望您的函数返回“＆＃39;类别”的名称。而它返回undefined。
解决此问题的一种方法是将父组件的状态设置为后端（/api/selectName）返回的任何内容，并将其作为道具传递给TransactionList而不是调用{在selectName函数中{1}}，在其他地方调用它（例如在render内）

执行辅助函数以显示数据 - React，Express

1 个答案: