Я хочу изменить то, что я получаю с помощью реквизита - PullRequest
Новая
       31

Я хочу изменить то, что я получаю с помощью реквизита

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

Я хочу изменить то, что я получаю с помощью подпорки, с помощью .toLocalString (), но консоль возвращает ошибку:

TypeError: case не определено для ligne: const test = case.toLocalString () в тестовом компоненте

, тогда как, если я рендую реквизиты напрямую без изменений, это работает, поэтому реквизиты не являются неопределенными.

Это родительские компоненты: 

import React, { useEffect, useState } from "react";

export default function App() {

  const [globalStats, setGlobalStats] = useState({})

  const getGlobalStats = async () => {
    try {
      let response = await fetch("https://corona.lmao.ninja/all/")
      const data = await response.json()
      setGlobalStats(data)
      console.log(data)
    } catch (err) {
      console.error('getGlobalStats error: ', err, err.stack)
    }
  }

  useEffect(() => {
    getGlobalStats()
  }, [])

  return (
    <div className="App">
      <Test cases={globalStats.cases} />
    </div>
  );
}

А это дочерний компонент: 

import React from 'react'

const Test = ({ cases }) => {

  const renderCases = cases.toLacalString()

  return(
    <div>
      { 
        cases ? renderCases : null 
      }
    </div>
  )
}

export default Test

Ответы [ 2 ]

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

Итак, это то, что происходит, вы выбираете данные, которые являются асинхронными c задачами, поэтому на это требуется время, но ваш Test компонент этого не знает, он пытается получить доступ к данным, которых еще нет. Так что вы можете сделать проверку перед доступом к данным: 

import React from 'react'

const Test = ({ cases }) => {

  // Check the condition here, also the method name is .toLocaleString()
  const renderCases = cases && cases.toLocaleString()

  return(
    <div>
      { 
        cases ? renderCases : null 
      }
    </div>
  )
}

export default Test

Надеюсь, это поможет:)

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

Это, вероятно, происходит до того, как компонент рендерится до фактического присвоения значения cases.

Вы используете троичный оператор, подобный этому: cases ? renderCases : null, но этого недостаточно.

Я бы сделал что-то вроде этого: 

return (
    <div className="App">
      {globalStats.cases && <Test cases={globalStats.cases} />}
    </div>
  );

Рендеринг компонента будет выполняться только после завершения асинхронной c функции getGlobalStats и обновления состояния.

Ваш дочерний компонент выполнит это: 

const renderCases = cases.toLocalString()

При первом рендеринге и при первом рендеринге ваша асинхронная функция c все еще выполняется. Это означает, что случаи будут неопределенными, что приведет к sh toLocalString()

...