我想修改我收到的道具

Question

我想用 .toLocalString() 修改道具接收到的内容，但控制台 returns 出错：

TypeError: cases is undefined about the ligne: const test = cases.toLocalString() in Test component

而如果我不加修改直接渲染道具，它就可以工作，所以道具不是未定义的。

这是父组件:

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

Answer 1

这可能发生在 cases 的值实际分配之前组件呈现之前。

您正在使用这样的三元运算符：cases ? renderCases : null，但这还不够。

我会做这样的事情：

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

这只会在异步函数 getGlobalStats 完成并更新状态时呈现组件。

您的子组件将执行此操作：

const renderCases = cases.toLocalString()

在第一次渲染时，在第一次渲染时，您的异步函数仍在运行。这意味着案例将是未定义的，这将导致崩溃 toLocalString()

Answer 2

所以这就是正在发生的事情，您正在获取异步任务的数据，因此需要时间，但您的 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

希望对您有所帮助:)

我想修改我收到的道具

I want to modify what I receive by props

reactjs

fetch-api

react-props