Передача переменных в JSX

Question

У меня есть функция, в которой я отправляю запрос на выборку и сохраняю возвращенные данные, используя setStockData базовая c разбивка кода ниже.

  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...
}

Подробности в учебнике .