Question

Reactjs不更新product_number的新值。我知道有人问过类似的问题，但是很难解决这个问题。

下面的 Reactjs 代码显示了来自阵列的配置记录。现在，我需要将 product_number 的值从 001 替换为 006 。

为此，我添加了一个更新按钮，该按钮可从Axios调用中获取 product_number 。

我的问题是，单击按钮后，产品编号没有更新为 006 。

这是Axios Call的product_number更新的json响应

product_number.json

[{"product_number":"006"}]

这是代码

import React, { Component, Fragment } from "react";
import { render } from "react-dom";
import axios from 'axios';


class Application extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [],
      loading: false
    };
  }

  componentDidMount() {
    this.setState({


      data: [
{"provision_id":"1","provision":"Milk","category":[{"category_id":"1","category_price":"100 USD","product":[{"product_id":"1","product_number":"001"}]  }]}
],

    });
  }

// Get and update New Product number of Milk

 handleNewProductNumber(prod_id) {
alert(prod_id);
    const prod_data = {
      prod_id: prod_id};
    axios
      .get("http://localhost/provision/product_number.json", { prod_data })
      .then(response => {
        const newData = this.state.data.map(store => {

//if (product.product_id  !== prod_id) return product;
return {
  ...store, 
  product: store.product.map(
    product => {
      if (product.product_id !== prod_id) return product
      return { ...product, product_number: response.data[0].product_number }
    }
  )
};


        });

 this.setState(state => ({
          data: newData
        }));
console.log(response.data[0].category_price);
      })
      .catch(error => {
        console.log(error);
      });
  }



  render() {
    return (
      <span>
        <label>
          <ul>


{this.state.data.map((store) => {

 return (
 <div key={store.provision_id}>
<div><h1>Provision Store</h1> <br />
<b> Product: </b>{store.provision} 

</div>



 {store.category && store.category.map((cat) => {

          return (
            <div key={cat.category_id}>
              <div><b>Prices:</b> {cat.category_price}






</div>
{cat.product && cat.product.map((prod) => <div key={prod.product_id}>
<b>Product Number:</b> #{prod.product_number}

 <br />
                <input
                  type="button"
                  value="Get & Update New Product Number"
                  onClick={() => this.handleNewProductNumber(prod.product_id)}
                />

</div>)}


              </div>
          )
        })}

</div>
)

 })}
          </ul>
        </label>
      </span>
    );
  }
}

使用地图功能更新部分

    return {
      ...store, 
      category: store.category.map(
 product: store.product.map(
        product => {
          if (product.product_id !== prod_id) return product
          return { ...product, product_number: response.data[0].product_number }
        })

 })
    };

Answer 1

问题与另一个问题相同，您有一个处于对象状态的对象数组，另一个对象数组内部：

data: [
  {
    "provision_id": "1",
    "provision": "Milk",
    "category": [
      {
        "category_id": "1",
        "category_price": "100 USD",
        "product": [
          {
            "product_id": "1",
            "product_number": "001"
          }
        ]
      }
    ]
  }
]

要更新内部级别，您必须遍历所有状态树：

return {
  ...store, 
  category: [{
    ...store.category,
    product: [{
       ...store.category[0].product,
       product_number: response.data[0].product_number
    }]
  }]
};

编辑后...好吧，您的编辑

您更新的代码段的语法无效：

return {
  ...store, 
  category: store.category.map(
    product: store.product.map(
      product => {
        if (product.product_id !== prod_id) return product
        return { ...product, product_number: response.data[0].product_number }
      }
    )
  })
};

第一个store.category.map调用使用一个函数，该函数将以单个类别作为参数进行调用。

您必须先展开category，然后再遮盖product属性：

return {
  ...store, 
  category: store.category.map(
    category => ({
      ...category,
      product: category.product.map(
        product => {
          if (product.product_id !== prod_id) return product
          return { ...product, product_number: response.data[0].product_number }
        }
      )
    })
  )
};

React.js没有更新product_number的新值

1 个答案:

编辑后...好吧，您的编辑