計算 React.js 中 API JSON 響應的出現次數

Question

基於我之前提出的這個問題（ Show fetch results in render return() in React.js ），從中我收到了json結果，我現在需要計算每個品牌擁有的沙發數量。 例如，品牌X出現了 2 次，品牌Y出現了 3043 次。
我通過在獲取時調用myUrlApi + /couch-model從一張沙發上獲取品牌，json 類似於您在下圖中看到的內容。

您是否可以看到每個沙發都與一個品牌相關聯。 我要數的是每個品牌有多少個沙發。

我將把我當前的代碼放在這里：

export class Main extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      token: {},
      isLoaded: false,
      models: []
    };
  }

  componentDidMount() {
    /*code to generate token, not needed for the purpose of the question*/

    fetch(url + "/couch-model/?limit=9", {
      method: "GET",
      headers: {
        "Content-Type": "application/json",
        Accept: "application/json",
        Authorization: "JWT " + JSON.parse(localStorage.getItem("token")).token
      }
    })
      .then(res => {
        if (res.ok) {
          return res.json();
        } else {
          throw Error(res.statusText);
        }
      })
      .then(json => {
        this.setState(
          {
            models: json.results
          },
          () => {}
        );
      });
  }

  render() {
    const { isLoaded, models } = this.state;

    if (!isLoaded) {
      return <div>Loading...</div>;
    } else {
      return (
        <div>
          {models.map(model => (
            <a href="/sofa" key={model.id}>
              <div className="Parcelas">
                <img src={img_src} className="ParcImage" alt="sofa" />
                <h1>Sofá {model.name}</h1>
                <h2>
                  1,200<span>€</span>
                </h2>

                <p
                  className="Features"
                  dangerouslySetInnerHTML={{ __html: model.description }}
                />

                <button className="Botao">
                  <p className="MostraDepois">Ver Detalhes</p>
                  <span>+</span>
                </button>
                <img
                  src="../../img/points.svg"
                  className="Decoration"
                  alt="points"
                />
              </div>
            </a>
          ))}
        </div>
      );
    }
  }
}

希望我說清楚了，如果您有任何疑問，請詢問。

Answer 1

如果您的結果看起來像您在帖子中所說的那樣：

{
  results: [
    {
      brand: { name: "Brand-A", image: "", etc: "..." },
      category: "A",
      code: "AAA",
      name: "SofaA",
      price: 1200
    },
    {
      brand: { name: "Brand-A", image: "", etc: "..."  },
      category: "A",
      code: "AAA",
      name: "SofaB",
      price: 1200
    },
    {
      brand: { name: "Brand-B", image: "", etc: "..."  },
      category: "A",
      code: "AAA",
      name: "SofaC",
      price: 1200
    }
  ]
}

您可以添加一個 state 屬性，比如sofasPerBrand初始化為 {}

constructor(props) {
    super(props);
    this.state = {
      token: {},
      isLoaded: true,
      models: [],
      sofasPerBrand: {}
    };
  }

並在componentDidMount的setState函數中添加 RIYAJ KHAN reduce 函數，如下所示：

this.setState(
      {
        models: json.results,
        sofasPerBrand: json.results.reduce((coundData, sofa, index) => {

          if (!!coundData[sofa.brand.name]) {
            coundData[sofa.brand.name] += 1;
          } else {
            coundData[sofa.brand.name] = 1;
          }
          return coundData;
        }, {})
      },
      () => { }
    );

然后你可以在你的渲染函數中聲明它：

const { isLoaded, models, sofasPerBrand } = this.state;

並在任何地方使用它：

<ul>
  {Object.keys(sofasPerBrand).map(brand=>(
      <li>{brand} : {sofasPerBrand[brand]}</li>
  ))}
</ul>

Answer 2

可以使用javascript#reducers 。

models.reduce((coundData,sofa,index)=>{

    if(!!coundData[sofa.brand.name]){
        coundData[sofa.brand.name] +=1; 
    }else{
        coundData[sofa.brand.name]=1;
    }

    return coundData;
}, {})