从 yfinance 数组映射数据在 React 表中不起作用

Question

好吧，我一直在阅读所有“在 React 中映射对象数组”的文章，但似乎没有什么对我有用。很抱歉，如果这看起来像是一个重复的问题，但我需要一个适合我的项目的答案。我使用 Fetch 从 yfinance 提取数据，以根据 server.py 创建的 JSON 创建对象数组。这似乎工作正常，但一旦我获取它就不会映射。我的获取代码如下所示：

const [data, setData] = useState([]);

  useEffect(() => {
    fetch("/history")
      .then((res) => res.json())
      .then((data) => {
        setData(data);
        console.log(data);
      });
  }, []);

在控制台中，我按预期得到了一个数组：

{schema: {…}, data: Array(19)}
data: Array(19)
0: {Date: '2022-02-09T00:00:00.000Z', Open: 935, High: 946.2700195312, Low: 920, Close: 932, …}
1: {Date: '2022-02-10T00:00:00.000Z', Open: 908.3699951172, High: 943.8099975586, Low: 896.700012207, Close: 904.549987793, …}
2: {Date: '2022-02-11T00:00:00.000Z', Open: 909.6300048828, High: 915.9600219727, Low: 850.700012207, Close: 860, …}
3: {Date: '2022-02-14T00:00:00.000Z', Open: 861.5700073242, High: 898.8800048828, Low: 853.1500244141, Close: 875.7600097656, …}
4: {Date: '2022-02-15T00:00:00.000Z', Open: 900, High: 923, Low: 893.3800048828, Close: 922.4299926758, …}
5: {Date: '2022-02-16T00:00:00.000Z', Open: 914.049987793, High: 926.4299926758, Low: 901.2100219727, Close: 923.3900146484, …}
6: {Date: '2022-02-17T00:00:00.000Z', Open: 913.2600097656, High: 918.5, Low: 874.0999755859, Close: 876.3499755859, …}
7: {Date: '2022-02-18T00:00:00.000Z', Open: 886, High: 886.8699951172, Low: 837.6099853516, Close: 856.9799804688, …}
8: {Date: '2022-02-22T00:00:00.000Z', Open: 834.1300048828, High: 856.7299804688, Low: 801.0999755859, Close: 821.5300292969, …}
9: {Date: '2022-02-23T00:00:00.000Z', Open: 830.4299926758, High: 835.299987793, Low: 760.5599975586, Close: 764.0399780273, …}
10: {Date: '2022-02-24T00:00:00.000Z', Open: 700.3900146484, High: 802.4799804688, Low: 700, Close: 800.7700195312, …}
11: {Date: '2022-02-25T00:00:00.000Z', Open: 809.2299804688, High: 819.5, Low: 782.4000244141, Close: 809.8699951172, …}
12: {Date: '2022-02-28T00:00:00.000Z', Open: 815.0100097656, High: 876.8599853516, Low: 814.7100219727, Close: 870.4299926758, …}
13: {Date: '2022-03-01T00:00:00.000Z', Open: 869.6799926758, High: 889.8800048828, Low: 853.7800292969, Close: 864.3699951172, …}
14: {Date: '2022-03-02T00:00:00.000Z', Open: 872.1300048828, High: 886.4799804688, Low: 844.2700195312, Close: 879.8900146484, …}
15: {Date: '2022-03-03T00:00:00.000Z', Open: 878.7700195312, High: 886.4400024414, Low: 832.5999755859, Close: 839.2899780273, …}
16: {Date: '2022-03-04T00:00:00.000Z', Open: 849.0999755859, High: 855.6500244141, Low: 825.1599731445, Close: 838.2899780273, …}
17: {Date: '2022-03-07T00:00:00.000Z', Open: 856.299987793, High: 866.1400146484, Low: 804.5700073242, Close: 804.5800170898, …}
18: {Date: '2022-03-08T00:00:00.000Z', Open: 795.5300292969, High: 849.9899902344, Low: 782.1699829102, Close: 824.4000244141, …}
length: 19
[[Prototype]]: Array(0)
schema: {fields: Array(8), primaryKey: Array(1), pandas_version: '1.4.0'}
[[Prototype]]: Object

现在，当我尝试映射它时，我似乎做错了一些事情，因为当我这样做时（我已经提取了相关代码，其中最相关的是打开 tbody 标记后的 data.map 函数）：

return (
         <Col>
          <h2>My Portfolio</h2>
          <Table striped bordered hover size="sm">
            
            <tbody>
              {data.map(({ overviewRow }) => (
              <tr>
                {/* key={overviewRow.Close}
                  <td>{overviewRow.Date}</td>
                  <td>{overviewRow.Open}</td> */}
                <td>
                  <NumberFormat
                    // value={overviewRow.High * 100}
                    displayType={"text"}
                    thousandSeparator={true}
                    decimalScale={2}
                    suffix={"%"}
                  />
                </td>
                <td>
                  <NumberFormat
                    // value={overviewRow.Close}
                    displayType={"text"}
                    thousandSeparator={true}
                    decimalScale={2}
                    prefix={"$"}
                  />
                </td>
                <td>
                  <NumberFormat
                    // value={overviewRow.Volume}
                    displayType={"text"}
                    thousandSeparator={true}
                    decimalScale={7}
                    fixedDecimalScale={false}
                  />
                </td>
                <td>
                  <NumberFormat
                    // value={overviewRow.Dividends}
                    displayType={"text"}
                    thousandSeparator={true}
                    decimalScale={7}
                    prefix={"$"}
                  />
                </td>
              </tr>
              ))}
            </tbody>
          </Table>
        </Col>
      </Row>
    </div>
  );

我收到“data.map 不是函数”错误。这看起来很奇怪，因为只有当我不使用数组时才会发生这种情况，而我显然是这样做的。我似乎无法弄清楚我是否引用了错误的东西或什么，这让我发疯。我已经阅读了很多有关映射对象数组的内容，但就像我之前所说的那样，没有一个解决方案似乎可以解决我的问题，我不知道为什么。再次，抱歉，如果这看起来像是一个重复的问题，但我必须弄清楚这一点。感谢您的耐心和帮助！

Answer 1

试试这个

data?.map(({ overviewRow }) => ....

如果此代码有效，我将更新此答案并解释此事件发生的情况

Answer 2

因此，事实证明，yfinance 输出的数据数组位于一个对象内部，直到我更仔细地阅读控制台数据并意识到设置后，我才发现它，它看起来像这样：

{schema: {…}, data: Array(19)}

这显然是一个对象。我修复它的方法是通过在我的 fetch 中向 setData 添加“.data”来指向对象内部的数据数组，所以不是这样：

const [data, setData] = useState([]);

  useEffect(() => {
    fetch("/history")
      .then((res) => res.json())
      .then((data) => {
        **setData(data);**
        console.log(data);
      });
  }, []);

它现在看起来像这样：

const [data, setData] = useState([]);

  useEffect(() => {
    fetch("/history")
      .then((res) => res.json())
      .then((data) => {
        **setData(data.data);**
        console.log(data);
      });
  }, []);

现在它可以工作了！

我想把它留在这里，以防其他人错过我所做的事情。事后看来，这似乎是显而易见的，但目前这些事情很容易被忽视。