reactjs - Reactjs 无法通过映射函数获取 json 数据

Question

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

通过显示数组中的 Provision 数据，代码在下面运行良好。当我单击获取新价格时，通过 Axios Json 调用获取新价格，一切正常。

[{"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>
                      )
                    })}

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

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>
    );
  }
}

标签： reactjs

Answer 1

从我的角度来看，您的问题是试图将数组传播到对象（请看下面我在代码中评论过），但我没有机会测试它，因为您没有向我们提供来自http://localhost/apidb_react/price.json. 所以如果我的修复对你有用——很好，如果不是——请附上模型 json。

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
    };
    const { data } = this.state;
    axios
      .post("http://localhost/apidb_react/price.json", { product })
      .then(response => {
        this.setState({
          data: data.map(store => {
            if (store.provision_id !== pro_id) {
              return store;
            } else {
              return {
                ...store,
                category_new: [
                  ...store.category_new, // that's fix for #1
                  {
                    /**
                     * problem #1 in line below, you're trying to spread array data 'store.category_new' to object
                     */
                    // ...store.category_new,
                    /**
                     * problem #2 I would recommend to make some validation 'response && response.data && response.data[0] && response.data[0].category_price'
                     */
                    category_price: response.data[0].category_price,
                    category_id: response.data[0].category_id
                  }
                ]
              }
            }
          })
        })
        console.log(response.data[0].category_price);
      })
      .catch(error => {
        console.log(error);
      });
  }

  render() {
    const { data } = this.state;
    return (
      <span>
        <label>
          <ul>
            {
              data.map(store => (
                <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>
    );
  }
}