在 JSX 中传递变量

Question

我有一个函数，我发送一个获取请求并使用 setStockData 存储返回的数据，代码的基本分解如下。

  function LoggedIN(){
      const [stockData, setStockData] = useState([]); // Data from the API search

       // 
      // Set the stockData from a fetch in this area 
     //

      return (
        <Graphdraw /> 
      );
    }

stockData 变量设置后基本上是这样的。

[
  {
    "timestamp": "2020-03-19T14:00:00.000Z",
    "symbol": "AAL",
    "name": "American Airlines Group",
    "open": 11.6,
    "high": 12.16,
    "low": 10.01,
    "close": 10.29,
  },
  {
    "timestamp": "2020-03-18T14:00:00.000Z",
    "symbol": "AAL",
    "name": "American Airlines Group",
    "open": 14.24,
    "high": 14.28,
    "low": 10.17,
    "close": 11.65,
  }
]

我想将 stockData 传递给 <Graphdraw /> 以便我可以像下面这样访问它

function Graphdraw(props){

  for (let i = 0; i < props.length; i++){
    console.log(props[i].low);
  }

}

到目前为止，我已经阅读了一些帖子并查看了 jsx 页面，但似乎无法使其正确通过。我如何将 stockData 传递给 <Graphdraw /> 以及我是否在 function Graphdraw (props) 中正确访问它？

Answer 1

试试这个？

function LoggedIN(){
  const [stockData, setStockData] = useState([]); // Data from the API search

   // 
  // Set the stockData from a fetch in this area 
 //

  return (
    <Graphdraw stockData={stockData} /> 
  );
}

function Graphdraw(props){
  for (let i = 0; i < props.stockData.length; i++){
     console.log(props.stockData[i].low);
  } 
}

Answer 2

你这样传：

return (
    <Graphdraw stockData={stockData} /> 
);

在 Graphdraw 中，您可以像 props.stockData 一样访问它，尽管在参数列表中使用解构很常见，因此您可以只使用 stockData:

function Graphdraw({stockData}) {
    // ...use `stockData` here...
}

详情见the tutorial。

在 JSX 中传递变量

Passing variables in JSX

javascript

jsx

use-state