Получить запрос на получение в React 'Cannot read property' map of undefined ' - PullRequest
Новая
       4

Получить запрос на получение в React 'Cannot read property' map of undefined '

0 голосов
/ 14 апреля 2020

Я пытаюсь сделать запрос на получение GET в React. Я новичок в этом, и у меня возникли проблемы с пониманием структуры ответа. В настоящее время я беру сервер с этим кодом и пытаюсь поместить его в таблицу. Но я продолжаю получать ошибку Unhandled Rejection (TypeError): Cannot read property 'map' of undefined. Может кто-нибудь объяснить мне, где я ошибся или что делать? 

const [rowData, setRowData] = useState([]);

  const columns = [
    { headerName: "Stock", field: "name"}, 
    { headerName: "Symbol", field: "symbol" }, 
    { headerName: "Industry ", field: "industry" }
  ];

useEffect(() => {
    fetch("PRIVATE SERVER")
    .then(res => res.json())
    .then(json => console.log(json))
    .then(data => 
      data.map(stocks => {
        return {
          name: stocks.name,
          symbol: stocks.symbol,
          industry: stocks.industry,
        };
      })
    )
    .then(stocks => setRowData(stocks));
  }, []);

Это пример того, как выглядит ответ JSON от сервера: 

[
  {
    "name": "Agilent Technologies Inc",
    "symbol": "A",
    "industry": "Health Care"
  },
  {
    "name": "American Airlines Group",
    "symbol": "AAL",
    "industry": "Industrials"
  }
]

1 Ответ

0 голосов
/ 14 апреля 2020

Проблема на самом деле с вашим использованием тогда. Вы должны попытаться применить другой подход к своему коду.

Например 

  const [rowData, setRowData] = useState([]);

  const columns = [
    { headerName: "Stock", field: "name"}, 
    { headerName: "Symbol", field: "symbol" }, 
    { headerName: "Industry ", field: "industry" }
  ];

useEffect(() => {
    fetch("PRIVATE SERVER")
    .then(res => res.json()
       .then(json => {
          console.log(json);
          const newRowData = json.map(stocks => {
             return {
                name: stocks.name,
                symbol: stocks.symbol,
                industry: stocks.industry,
             };
          });
          setRowData(newRowData);
       }));

Но я предложил вам попробовать asyn c -aait ради читабельности кода 

const [rowData, setRowData] = useState([]);

  const columns = [
    { headerName: "Stock", field: "name"}, 
    { headerName: "Symbol", field: "symbol" }, 
    { headerName: "Industry ", field: "industry" }
  ];

useEffect(() => {
   async function doFetch() {
      const fetchResponse = await fetch('PRIVATE SERVER', { method: 'GET' });
      if (response.status !== 200) // do something

      // extract the json string to json object
      const data = await fetchResponse.json();

      const newRowData = data.map(stocks => ({
         name: stocks.name,
         symbol: stocks.symbol,
         industry: stocks.industry,
      }));

      setRowData(newDataRow);
   }
...