无法将从多个 API 检索到的值显示到 Ag-Grid 行（反应）

Question

过去几天我遇到了这个问题，我尝试了一些方法，但没有奏效。

我正在尝试在 table 上显示一些股票信息。它适用于一只股票，但是当我尝试获取多只股票信息并将其组合时，我得到空白值。

请看代码

useEffect(() => {
        (async () => {
          try {
            let data = []
            data.push(await getAppleData())
            data.push(await getIBMData())
            console.log(data)
            setRowData(await data);
            setLoading(false);
          } catch (err) {
            setError(err);
            setLoading(false);
          }
        })();
      }, []);

这是其中一个 get[name]Data() 函数的样子：

async function getAppleData() {
        const url = `https://financialmodelingprep.com/api/v3/profile/AAPL?apikey=APIKEY`;
        let res = await fetch(url);
        let data1 = await res.json();
      
        return data1;
      }

在列部分，我尝试了这些规格，但它们不起作用

const columns = [
        { headerName: "Symbol", field: "symbol", 
        valueGetter: function (params) {
          return params.data.symbol;
        },},
        { headerName: "Price", field: "price" },
        { headerName: "Industry", field: "industry" }

      ];

我得到的输出是这样的：

Table Output

这也是 rowData

的 console.log

console.log(rowData)

有人能帮我弄清楚如何引用对象数组中的值吗？

谢谢

Answer 1

Array.prototype.push 会将整个响应附加到 data 数组，看起来响应是一个包含单个对象的数组，因此 data 包含两个数组而不是两个对象.

要附加对象而不是数组，您可以使用 Array.prototype.concat。

useEffect(() => {
  (async () => {
    try {
      let data = [].concat(await getAppleData(), await getIBMData());
      console.log(data);
      setRowData(data);
      setLoading(false);
    } catch (err) {
      setError(err);
      setLoading(false);
    }
  })();
}, []);

也可以使用Spread syntax，如下图：

useEffect(() => {
  (async () => {
    try {
      let data = [...(await getAppleData()), ...(await getIBMData())];
      console.log(data);
      setRowData(data);
      setLoading(false);
    } catch (err) {
      setError(err);
      setLoading(false);
    }
  })();
}, []);

此外，等待 data 没有意义，所以只需 setRowData(data)。