Выполнить вспомогательную функцию для отображения данных - React, Express

Question

У меня есть вспомогательная функция, которая в основном выбирает название продукта на основе для идентификатора категории продукта и идентификатора из таблицы категорий:

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

Приведенный выше код вернет имя, если переданный идентификатор равен идентификатору категории.

А затем в своем экспресс-файле я настроил его так, чтобы он вызывался в моем интерфейсе реакции:

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 и проверит эквивалентный идентификатор внутри категорий и идентификатора и вернет имя.

Итак, внутри моего компонента 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, где я вызываю функцию, я хочу вернуть имя категории с переданным эквивалентным идентификатором. Если в этой строке нет category_id, вместо него должно отображаться «NO ID».

Как мне выполнить эту внутреннюю реакцию? Что я делаю неправильно? Как сделать условное, так что если в этой строке нет 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> вы ожидаете, что ваша функция вернет имя категории, в то время как она вернет undefined.

• Одним из способов решения этой проблемы было бы установить состояние родительского компонента в соответствии с тем, что возвращает ваш сервер (/api/selectName), и передать его до TransactionList в качестве реквизита и вместо вызова selectName внутри вашего render функция, вызовите ее где-нибудь еще (например, внутри componentDidMount)