Question

Reactjs无法通过映射功能获取json数据。

下面的代码通过显示数组中的Provision数据，可以很好地工作。当我单击获取新价格时，获取新价格通过Axios Json Call，一切正常。

[{"category_id" => "101", "status"=>"1", "category_price" => "900"}]

这是执行此操作的功能。

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

这是我渲染的方式，它可以与上面的功能正常工作

{store.category_new && store.category_new.map((cat1) => {
                      return (
                        <div key={cat1.category_id}>

                          <div><b>New Prices:</b> {cat1.category_price}  ----- {cat1.category_id}

                          </div>
                        </div>
                      )
                    })}

这是我的问题 我的问题是我需要通过 mapping 函数来渲染它，所以我已经创建了它作为替换，但是它触发了地图错误。我相信这是导致错误的行

category: store.category_new.map(

此处为地图功能

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

这是完整的代码

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

class App 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 New Price of Milk on button click

  handleNewPrice(pro_id) {
    alert(pro_id);
    const product = {
      pro_id: pro_id};
      axios
        .post("http://localhost/apidb_react/price.json", { product })
        .then(response => {

const newData = this.state.data.map(store => {
            if (store.provision_id !== pro_id) return store;
return {
  ...store, 
  category_new: [{
    ...store.category_new,
    category_price: response.data[0].category_price, category_id: response.data[0].category_id
  }]
};




/*

return {
  ...store, 
  category: store.category_new.map(
    category => {
      if (category.category_id !== pro_id) return category
      return { ...category, 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_new && store.category_new.map((cat1) => {
                      return (
                        <div key={cat1.category_id}>

                          <div><b>New Prices:</b> {cat1.category_price}  ----- {cat1.category_id}

                          </div>
                        </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 New Prices"
                              onClick={() => this.handleNewPrice(cat.category_id)}
                            />
                          </div>
                        </div>
                      )
                    })}
                  </div>
                )
              }
            )}
          </ul>
        </label>
      </span>
    );
  }
}

Answer 1

从我的角度来看，您的问题是尝试将数组扩展到对象（请参见下面的代码注释），但是我没有机会进行测试，因为您没有向我们提供{{ 1}}。因此，如果我的解决方案对您有用-很好，如果不能-请附加模型json。

http://localhost/apidb_react/price.json

Answer 2

这就是我能够解决它的方式。如果有人使用其他方法，请发布。

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

React.js无法通过映射功能获取JSON数据

2 个答案: