我在哪里填充数据表的数组以在渲染上显示？

Question

我正在填写要在我的网页上显示的数据表。它仅在我与排序按钮交互时呈现。我应该在哪里填充这个数组以便在数据表中使用，以便它发生在渲染之前？

export function MyComponent() {
const columns = [
    {
        name: 'Player',
        selector: row => row.Player,
        sortable: true,
    },
    
];

const [teamArray, setTeamArray] = useState([])
const [managerTeamList, setTeamList] = useState([])
const [bootstrapData, setBootstrapData] = useState([])
var managersteam = [];

useEffect(() => {
    
    getBootstrap().then(bootstrap => {
        setBootstrapData(bootstrap.elements)
    })

    getManagersTeam(27356,28).then(data => {
        setTeamList(data.picks)
    }) 


    for (var i in managerTeamList) {
        for (var j in bootstrapData) {
            if (managerTeamList[i].element == bootstrapData[j].id) {
                managersteam.push({
                    "Player" : bootstrapData[j].second_name
                })
                break;
            }
        }
    }
    setTeamArray(managersteam)
    
}, []);

return (
<DataTable columns={columns} data={teamArray}/>
)
}

Answer 1

请注意 api 请求是异步的 - getBootstrap 和 getManagersTeam - 因此当您尝试循环访问数据时它们是空的。

您可以使用 async/await 或在 promise 解决后更新 teamArray。

您可以使用以下代码：

export function MyComponent() {
  const columns = [
    {
      name: "Player",
      selector: (row) => row.Player,
      sortable: true,
    },
  ];

  const [teamArray, setTeamArray] = useState([]);

  const fetchData = async () => {
    var managersteam = [];
    const [bootstrap, data] = await Promise.all([
      getBootstrap(),
      getManagersTeam(27356, 28)
    ]);

    for (var i in data.picks) {
      for (var j in bootstrap.elements) {
        if (data.picks[i].element == bootstrap.elements[j].id) {
          managersteam.push({
            Player: bootstrap.elements[j].second_name,
          });
          break;
        }
      }
    }
    setTeamArray(managersteam);
  }

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

  return <DataTable columns={columns} data={teamArray} />;
}

我在哪里填充数据表的数组以在渲染上显示？

Where do I fill an array for a datatable to display on render?

javascript

async-await

reactjs

next.js