ReactJS 从 json 对象为选择选项创建数组

Question

嗨，我对 reactjs 很陌生。我有一个托管的 json 文件，如下所示。 Json 对象如下所示，具有大约 500 多个值：

[  
  {
    "timestamp": "2020-03-23T14:00:00.000Z",
    "symbol": "CMG",
    "name": "Chipotle Mexican Grill",
    "industry": "Consumer Discretionary",
    "open": 561.31,
    "high": 602.265,
    "low": 551.21,
    "close": 588.71,
    "volumes": 1281710
  },
  {
    "timestamp": "2020-03-23T14:00:00.000Z",
    "symbol": "MTD",
    "name": "Mettler Toledo",
    "industry": "Health Care",
    "open": 615.51,
    "high": 652.94,
    "low": 592.64,
    "close": 641.845,
    "volumes": 157358
  },
  {
    "timestamp": "2020-03-23T14:00:00.000Z",
    "symbol": "AZO",
    "name": "AutoZone Inc",
    "industry": "Consumer Discretionary",
    "open": 711.65,
    "high": 741.865,
    "low": 684.91,
    "close": 723.22,
    "volumes": 435135
  },
  {
    "timestamp": "2020-03-23T14:00:00.000Z",
    "symbol": "GOOGL",
    "name": "Alphabet Inc Class A",
    "industry": "Information Technology",
    "open": 1056.37,
    "high": 1066.91,
    "low": 1008.87,
    "close": 1054.13,
    "volumes": 4116970
  },
  {
    "timestamp": "2020-03-23T14:00:00.000Z",
    "symbol": "GOOG",
    "name": "Alphabet Inc Class C",
    "industry": "Information Technology",
    "open": 1061.32,
    "high": 1071.32,
    "low": 1013.54,
    "close": 1056.62,
    "volumes": 4001750
  },
  {
    "timestamp": "2020-03-23T14:00:00.000Z",
    "symbol": "AMZN",
    "name": "Amazon.com Inc",
    "industry": "Consumer Discretionary",
    "open": 1827.75,
    "high": 1919.4,
    "low": 1812,
    "close": 1902.83,
    "volumes": 7701940
  }
]

我想要来自 json 对象的 独特 行业项目数组。我正在尝试从 json 对象行业创建唯一数组并将其传递给 html 。计划是用它来搜索。但我似乎无法在数组中映射和存储行业对象。 这是我的代码：SelectIndustry.js

    function SelectIndustry() {

  const [industry,setindustry]=useState('');
  // fetch jason and store industry
  useEffect (()=>{
    fetch('http://localhost:3000/all')
    .then((rs)=>rs.json())
    .then((rs)=>{rs.map((info)=>{
      return {industry:info.industry}})})
    
  },[])
    // trying to get remove duplicate item from array
    let uniqueindustry = [...new Set(industry)]
    console.log(uniqueindustry)
        // mapping array item to select option
        var select = document.getElementById("selectIndustry"); 
    for(var i = 0; i <uniqueindustry.length; i++) {
        var opt = uniqueindustry[i];

        var el = document.createElement("option");
        el.textContent = opt;
        el.value = opt;
        select.appendChild(el);
    }
    return (
        <select id='selectIndustry'>
        <option>Choose a Industry</option>
        </select>

    );
}
export default SelectIndustry;

我不知道如何实现这一点。如果需要，我很乐意重写整个代码。请帮忙

Answer 1

您可以在退货时使用地图

import React, { useState, useEffect } from "react";

const SelectIndustry = () => {
    const [industry, setIndustry] = useState(null);

    const loadIndustry = async () => {
        try {
            const response = await fetch('http://localhost:3000/all');
            const datas = await response.json();
            const filter = datas.map(data => data.industry);
            setIndustry(filter);
        } catch (error) {
            console.log("loadIndustry", error);
        }
    };

    useEffect(() => {
        loadIndustry();
    }, []);

    return (
        <>
            {industry && (
                <select id="selectIndustry">
                    {industry.map((item, index) => (
                        <option key={index}>{item}</option>
                    ))}
                </select>
            )}
        </>
    );
};

export default SelectIndustry;