如果反应道具深深嵌套在 JSON 对象中，如何传递它？

Question

I'm making a table of products for a shop (the headers are: id, title, imagePath, newPrice, oldPrice ) coming from a JSON file and got an ItemTable component created in my React app to iterate over the contents of it.

Here is the code

import React, { Component } from "react";

import "./ItemTable.css";

class ItemTable extends Component {
  render() {
    return (
      <table>
        <thead>
          <tr>
            <th>#</th>
            <th>Title</th>
            <th>Image</th>
            <th>
              Price &nbsp;
              <button onClick={() => this.props.priceSort("title")}>
                Sort
              </button>
            </th>
            <th>Old price</th>
          </tr>
        </thead>
        <tbody>
          {this.props.data.map(row => (
            <tr key={row.id}>
              <td>{row.id}</td>
              <td>{row.data.title}</td>
              <td>
                <img src={row.data.base_url} alt="" />
              </td>
              <td>{row.data.price}</td>
              <td>{row.data.oldPrice}</td>
            </tr>
          ))}
        </tbody>
      </table>
    );
  }
}

export default ItemTable;

...and here's my App component...

import React, { Component } from "react";
import ItemTable from "./components/ItemTable/ItemTable";

import shop from "./data/shop.json";

import "./App.css";

class App extends Component {
  state = {
    data: shop
  };

  priceSort = key => {
    this.setState({
      data: shop.sort((a, b) => parseFloat(b[key]) - parseFloat(a[key]))
    });
  };

  render() {
    return (
      <div className="page-container">
        <ItemTable data={this.state.data} priceSort={this.priceSort} />
      </div>
    );
  }
}

export default App;

My priceSort() function dosn't work though because I can't figure out the way to pass a deeply nested JSON prop. Here's a part of my JSON for you to get the picture...

[
  {
    "id": 2,
    "data": {
      "price": 990,
      "cross_category_id": "733",
      "id": "95361595",
      "available": "true",
      "base_url": "http://image01.bonprix.ru/assets/319x448/1530596198/18164321-KFBpLZ9R.jpg",
      "target_url": "https://upload.wikimedia.org/wikipedia/commons/thumb/8/8e/White_stiletto_high-heels.jpg/300px-White_stiletto_high-heels.jpg",
      "title": "High heeled shoes",
      "url": "http://ssl.hurra.com/TrackIt?tid=10087150C577PPC&url=[[http://www.bonprix.ru/produkty/pulover-s-vysokim-vorotnikom-chernyj-953615/?landmark=Entry&wkz=98&iwl=291&typ=POR&anbieter=Soloway&aktion=POR_VKB&version=SSP_NAME&promo=promo]]",
      "discount": 0,
      "categoryId": ["733"],
      "description_id": "default",
      "star": "4",
      "picture": [
        { "sizetype": "st_w240_h310", "path": "st_w240_h310/2/335/95361595" },
        { "path": "st_w300_h500/2/335/95361595", "sizetype": "st_w300_h500" },
        { "sizetype": "st_w64_h90", "path": "st_w64_h90/2/335/95361595" }
      ],
      "oldPrice": 990
    },
    "main": 1,
    "refs": []
  }

The question is: how do i pass the price from my JSON file?

Answer 1

Because in your priceSort you're no getting any data to sort. Try this:

priceSort = key => {
  this.setState(({ data: shop }) => {
     const sortedData = shop.sort((a, b) =>
       parseFloat(b['data'][key]) - parseFloat(a['data'][key])
     );
     return { data: sortedData }
  });
};