Question

我目前正在尝试重构我正在从事的React项目。该文件变得非常庞大，因此我想将其分解为其他文件。我的原始文件app.js包含以下状态：

this.state = {
  selectProduct: [],
  quantityProduct: [],
  colorsProduct: [],
  stockProduct: [],
  turnaroundProduct: [],
  coatingProduct: [],
  attributeProduct: [],
  attributeMetaProduct: [],
}

然后我运行一个函数来执行获取请求，并以此来更新状态：

pullProductDetails = () => {
  fetch('http://127.0.0.1:8000/product_details/fetch/36')
  .then(response => response.json())
  .then(json => {
    const quantityDetails = json.productQuanties.map((quantityDetail) => {
        quantityDetail.selected = false;
    });
    const colorDetails = json.productColor.map((colorDetail) => {
        colorDetail.selected = false;
    });
    const stockDetails = json.productPaperStock.map((stockDetail) => {
        stockDetail.selected = false;
    });
    const turnaroundDetails = json.productTurnaround.map((turnaroundDetail) => {
        turnaroundDetail.selected = false;
    });

    if (json.productCoating.length > 0) {
      const coatingDetails = json.productCoating.map((coatingDetail) => {
          coatingDetail.selected = false;
      }) }
    if (json.productAttributeMeta.length > 0) {
      const attributeMetaDetails = json.productAttributeMeta.map((attributeMetaDetail) => {
          attributeMetaDetail.selected = false;
      }) }

    this.setState(
      {
        quantityProduct: [...this.state.quantityProduct, ...json.productQuanties],
        colorsProduct: [...this.state.colorsProduct, ...json.productColor],
        stockProduct: [...this.state.stockProduct, ...json.productPaperStock],
        turnaroundProduct: [...this.state.turnaroundProduct, ...json.productTurnaround],
        coatingProduct: [...this.state.turnaroundProduct, ...json.productCoating],
        attributeProduct: [...this.state.attributeProduct, ...json.productAttribute],
        attributeMetaProduct: [...this.state.attributeMetaProduct, ...json.productAttributeMeta],
      },
      () => {console.log(this.state)}
    );
      });
}

要精简我的app.js文件，我为上述代码创建了一个新文件，如下所示：

///在这里，我们获取api以获取每个下拉的产品详细信息

export const pullProductDetails = () => {
  fetch('http://127.0.0.1:8000/product_details/fetch/36')
  .then(response => response.json())
  .then(json => {
    const quantityDetails = json.productQuanties.map((quantityDetail) => {
        quantityDetail.selected = false;
    });
    const colorDetails = json.productColor.map((colorDetail) => {
        colorDetail.selected = false;
    });
    const stockDetails = json.productPaperStock.map((stockDetail) => {
        stockDetail.selected = false;
    });
    const turnaroundDetails = json.productTurnaround.map((turnaroundDetail) => {
        turnaroundDetail.selected = false;
    });

    if (json.productCoating.length > 0) {
      const coatingDetails = json.productCoating.map((coatingDetail) => {
          coatingDetail.selected = false;
      }) }
    if (json.productAttributeMeta.length > 0) {
      const attributeMetaDetails = json.productAttributeMeta.map((attributeMetaDetail) => {
          attributeMetaDetail.selected = false;
      }) }

      return [quantityDetails, colorDetails, stockDetails, turnaroundDetails, coatingDetails, attributeMetaDetails];

      });
}

在上面的代码中，我试图用json数据返回这些变量中的每个变量，以便我可以使用它来设置状态，但是在我的控制台中它说该变量不存在。我还尝试从js文件运行控制台，它显示未定义：

console.log(quantityDetails);

我希望能够访问变量，因为我要返回它们，但我无法这样做。有人可以让我知道我在做什么错吗？

Answer 1

const quantityDetails = json.productQuanties.map((quantityDetail) => {

数量=>也许数量？

如果不是错字，我不会知道为什么。

React从JSON返回多个变量

1 个答案: