React.js joi-browser根据数据库进行验证

问题描述

我正在尝试使用“ joi-浏览器”模式来验证输入。 我希望输入值仅在与处于该状态的数组内的任何对象内的description属性相似时才有效。 该数组来自数据库，并在componentDidMount上设置。

这是到目前为止的架构：

orderItemsSchema = {
  id: Joi.number(),description: Joi.string().min(6).max(30).label("Description"),quantity: Joi.number().min(1).label("Quantity"),};

schema = {
  custName: Joi.string().min(2).max(30).required().label("Customer Name"),orderItems: Joi.array()
    .label("orderItems")
    .required()
    .items(this.orderItemsSchema),};

这是componentDidMount的外观：

componentDidMount = async () => {
    const { data } = await productService.getAllProducts();
    console.log("DBPRODUCTS B4 SET",this.state.dbProducts);
    if (data) {
      this.setState({ dbdata: data });
      console.log("dbdata after set",this.state.dbdata);
    }
  };

设置后的数组（dbdata）：

dbdata after set (21)
0: {createdAt: "2020-10-02T08:15:31.644Z",_id: "5f7713c5d1cee74e44af03a4",description: "Mazdar Swiffer mops",price: 8.49,inStorage: 73,…}
1: {createdAt: "2020-10-02T08:15:31.644Z",_id: "5f77142fd1cee74e44af03a5",description: "Taggba Clorox bleach",price: 3.49,inStorage: 534,…}
2: {createdAt: "2020-10-02T08:15:31.644Z",_id: "5f7715a8d1cee74e44af03a8",description: "Castle Supply Carpet cleaner",price: 9.99,inStorage: 168,…}
3: {createdAt: "2020-10-02T08:15:31.644Z",_id: "5f771601d1cee74e44af03a9",description: "Quickie All Purpose",price: 9,inStorage: 407,…}
4: {createdAt: "2020-10-02T08:15:31.644Z",_id: "5f77162cd1cee74e44af03aa",description: "All-Purpose Cleaner Spray",price: 4,inStorage: 413,…}
5: {createdAt: "2020-10-02T08:15:31.644Z",_id: "5f77167dd1cee74e44af03ab",description: "Mrs. Meyer’s Multi-Surface Cleaner",price: 3.99,inStorage: 153,…}
...

我尝试使用joi浏览器的有效（）代替.min（）。max（），如下所示：

description: Joi.string()
  .valid(this.state.dbdata.map((item) => item.description))
  .label("Description"),

但是我没有得到我期望的错误，而是得到：“描述”必须是[]之一。 这基本上意味着该数组为空，这意味着它尚未在componentDidMount中设置 对吧？

我该如何解决？

解决方法

在componentDidMount从数据库中获取数据之后，使用componentDidUpdate解决了更新架构的问题。

orderItemsSchema = {};

schema = {};

//Fetch data from db and setState
componentDidMount = async() => {
  const {
    data: dbdata
  } = await productService.getAllProducts();
  if (dbdata) {
    this.setState({
      dbdata
    });
  }
};

//Update Joi schema after data has been fetched
componentDidUpdate = () => {
  this.orderItemsSchema = {
    id: Joi.number(),description: Joi.string()
      .valid(this.state.dbdata.map((item) => item.description))
      //Will be valid only if matches an item.description
      .label("Description"),quantity: Joi.number().min(1).label("Quantity"),};
  this.schema = {
    custName: Joi.string().min(2).max(30).required().label("Customer Name"),orderItems: Joi.array()
      .label("orderItems")
      .required()
      .items(this.orderItemsSchema),important: Joi.boolean().required(),totalPrice: Joi.number().required(),};
};