Question

Reactjs无法更新准备金category_price的值。

下面的 Reactjs 代码显示了来自阵列的配置记录。

现在，我需要将category_price的值从 100 USD 替换为 500 USD。

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

我的问题是，单击按钮后， CATEGORY_PRICE 不会更新为500美元。

在控制台中，单击按钮后，我可以通过以下代码看到 500美元：console.log(response.data[0].category_price)

这是Axios通话的json响应，用于category_price更新

price.json

[{"category_price":"500 USD"}]

代码如下：

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" }]
      }],
    });
  }

  // Get and update New Price of Milk
  handleNewPrice(pro_id) {
    alert(pro_id);
    const product = {
      pro_id: pro_id};
      axios
        .get("http://localhost/provision/price.json", { product })
        .then(response => {
          const newData = this.state.data.map(store => {
            if (store.provision_id !== pro_id) return store;
              return { ...store, category_price: response.data[0].category_price };
            });
            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}
                            <br />
                            <input
                              type="button"
                              value="Get & Update New Price"
                              onClick={() => this.handleNewPrice(cat.category_id)}
                            />
                          </div>
                        </div>
                      )
                    })}
                  </div>
                )
              }
            )}
          </ul>
        </label>
      </span>
    );
  }
}

Answer 1

“商店”对象的属性类别是一个数组，因此在这里：

return { ...store, category_price: response.data[0].category_price };

您要在它们的根处添加一个category_price属性。您应该这样写：

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

仅当数组category中包含单个元素时，此语法才有效；否则，您也应将其与方法作为参数接收的category_id进行映射：

return {
  ...store, 
  category: store.category.map(
    category => {
      if (category.category_id !== pro_id) return category
      return { ...category, category_price: response.data[0].category_price }
    }
  )
}

我只是建议，最好评估您的变量名称，因为我发现它们很容易出错。

例如，在onClick处理程序中，调用一个方法，该方法在category_id对象上传递名为cat的属性。

<input
  type="button"
  value="Get & Update New Price"
  onClick={() => this.handleNewPrice(cat.category_id)}
/>

然后，在该方法的签名中，将其称为pro_id，它看起来更像是“与产品相关的”，实际上，以后您以“与产品类似”的方式使用它：

handleNewPrice(pro_id) {
  alert(pro_id);
  const product = { pro_id: pro_id };

现在，我不知道您的代码库，所以我真的无法告诉您它是否正确，但是肯定容易出错，您可以同意我的看法。

正确而清楚地命名事物非常重要。同样，请考虑一下，您几乎不需要缩写使它们难以理解的东西，字符是免费的：）

Reactjs无法更新预备商品的价格category_price

1 个答案: