如何从API请求的数据中分配对象的值？

Question

我是一个初学web开发人员，我有与API请求相关的问题。我在一个名为footData的异步函数中发出了一个API请求，该函数将在success变量中返回一个数组（例如，[0,2,4,12,32,...])。然后，我必须将这个数组的值插入对象my data object中。所以，我的数据[0].成功一定是我的成功[0]。问题是我无法从异步函数中获取成功数据。

下面是我的代码：

import { Table } from 'antd'
import React from 'react'

const columns = [
  {
    title: 'POS',
    dataIndex: 'position',
    key: 'position',
    className: 'bg-transparent text-gray-6 thEl',
  },
  {
    title: 'Time',
    dataIndex: 'team',
    key: 'team',
    className: 'bg-transparent text-gray-6 thEl',
  },
  {
    title: 'Pontos',
    dataIndex: 'points',
    key: 'points',
    className: 'bg-transparent text-gray-6 thEl',
  },
  {
    title: 'Jogos',
    dataIndex: 'games',
    key: 'games',
    className: 'bg-transparent text-gray-6 thEl',
  },
  {
    title: 'Vitórias',
    dataIndex: 'wins',
    key: 'wins',
    className: 'bg-transparent text-gray-6 thEl',
  },
  {
    title: 'Empates',
    dataIndex: 'draws',
    key: 'draws',
    className: 'bg-transparent text-gray-6 thEl',
  },
  {
    title: 'Derrotas',
    dataIndex: 'defeats',
    key: 'defeats',
    className: 'bg-transparent text-gray-6 thEl',
  },
  {
    title: 'Gols Pró',
    dataIndex: 'goals',
    key: 'goals',
    className: 'bg-transparent text-gray-6 thEl',
  },
  {
    title: 'Gols Contra',
    dataIndex: 'own_goals',
    key: 'own_goals',
    className: 'bg-transparent text-gray-6 thEl',
  },
  {
    title: 'Saldo de Gols',
    dataIndex: 'goal_balance',
    key: 'goal_balance',
    className: 'bg-transparent text-gray-6 thEl',
  },
  {
    title: 'Aprov. (%)',
    dataIndex: 'success',
    key: 'success',
    className: 'bg-transparent text-gray-6 thEl',
    render: (text) => <span className="font-weight-bold">{text}</span>
  },
  {
    title: 'Recentes',
    dataIndex: 'recent',
    key: 'recent',
    className: 'bg-transparent text-gray-6 thEl',
  },
]

const data = [
  {
    "key": "1",
    "position": "1",
    "success": "+3,125",
    "team": "Flamengo",
    "points": "12",
    "games": "31",
    "wins": "12",
    "draws": "32",
    "defeats": "42",
    "goals": "43",
    "own_goals": "12",
    "goal_balance": "42",
    "recent": "1",
    "progress": { "value": 60, "color": "bg-success" },
  },
  {
    "key": "2",
    "position": "2",
    "success": "+3,125",
    "team": "Fluminense",
    "points": "12",
    "games": "31",
    "wins": "12",
    "draws": "32",
    "defeats": "42",
    "goals": "43",
    "own_goals": "12",
    "goal_balance": "42",
    "recent": "1",
    "progress": { "value": 15, "color": "bg-orange" },
  },
  {
    "key": "3",
    "position": "3",
    "success": "+3,125",
    "team": "Cruzeiro",
    "points": "12",
    "games": "31",
    "wins": "12",
    "draws": "32",
    "defeats": "42",
    "goals": "43",
    "own_goals": "12",
    "goal_balance": "42",
    "recent": "1",
    "progress": { "value": 25, "color": "bg-primary" },
  }
]

const footData = async () => {
  const url = "https://api.api-futebol.com.br/v1/campeonatos/10/fases/55";
  const bearer = 'Bearer live_450d03addcc0af4ab0adf3d67ec6ee';

  const response = await fetch(url, {
    "method": "GET",
    "headers": {
      "Authorization": bearer
    }
  })
  const json = await response.json();
  const fData = json.tabela;
  const success = fData.map(obj => obj.aproveitamento)
  for (let i = 0; i < success.length; i++) {
    console.log(success[i]);
  }
  return {
    success
  }
}

footData(data);

const HistoryTable = () => {
  return (
    <div className="table-responsive text-nowrap historyTable">
      <Table columns={columns} dataSource={data} pagination={false} />
    </div>
  )
}

export default HistoryTable

事先非常感谢。

Answer 1

当您这样调用组件外部的函数时，您不能重新编写React Dom。然后我放了一些useState,useEffect用法来调用API,并在从API获取数据后重新设计布局

const HistoryTable = () => {
  const [tbData, setTbData] = useState(data)
  useEffect(()=>{
     const newData = await footData(data);
     setTbData(newData.success)
  },[])
  return (
    <div className="table-responsive text-nowrap historyTable">
      <Table columns={columns} dataSource={tbData} pagination={false} />
    </div>
  )
}

export default HistoryTable

Answer 2

您可以在中执行操作。则():

 fetch(url, {
    "method": "GET",
    "headers": {
      "Authorization": bearer
    }
  })
  .then(response => response.json())
  .then(data => console.log(data));

您可以将值赋给数组或用它做任何其他事情，而不是记录响应。

.then(data => { arrayForSuccessData = data} )

请参阅有关FETCH的文档。