如何在 .map 中调用 ASYNC 函数以在 REACT 中填充 table？

Question

我正在尝试在 REACT 中使用 .map() 调用异步函数来填充 table 数据单元格。异步函数正在使用正在迭代的数组中的数据调用我的应用程序的后端。

被调用的函数 returns 正确调用时的数字。这是我第一次发布问题，所以任何帮助都很棒！如果我需要添加更多信息，我会的。

谢谢。

{tableInfo.map(info => (
      <tr>
        <td key={info.name}>{info.name}</td>
        <td key={info.price}>{info.price}</td>
        <td key={info.amount}>{info.amount}</td>
        <td>
          {async () => await fetchCurrentPrice.getPrice(info.name)}
        </td>
      </tr> ))}

Answer 1

async 履行始终 return 承诺。您无法在渲染期间异步获取数据。

你需要一个 useEffect 挂钩到运行收集数据的函数，然后是一个 useState 挂钩来存储它，以及在你运行时显示加载状态的逻辑敬请期待

const MyRow = ({ info }) => {
   const [currentPrice, setCurrentPrice] = useState(null);

   useEffect(() => {
       fetchCurrentPrice.getPrice(info.name).then(setCurrentPrice);
   }, [info]);

   return <tr>
        <td key={info.name}>{info.name}</td>
        <td key={info.price}>{info.price}</td>
        <td key={info.amount}>{info.amount}</td>
        <td>{currentPrice ?? <Loading />}</td>
   </tr>

}

和

{tableInfo.map(info => <MyRow key={info.name} info={info} />)}

Answer 2

为 tr 标签使用单独的组件并在其中调用它。

const Component = (props) => {
  const {info} = props
  
  useEffect(() => {
    // call your api and set it to state
  }, [])
  
  return <tr>
        <td key={info.name}>{info.name}</td>
        <td key={info.price}>{info.price}</td>
        <td key={info.amount}>{info.amount}</td>
        <td>
          {async () => await fetchCurrentPrice.getPrice(info.name)}
        </td>
      </tr>
}

{tableInfo.map(info => <Component info={info} />)}

如何在 .map 中调用 ASYNC 函数以在 REACT 中填充 table？

How can I call an ASYNC function inside of .map for populating a table in REACT?

javascript

node.js

promise

reactjs

array.prototype.map