如何避免在获取 api 时传递给 props 的未定义对象属性 (ReactJS)

Question

我试图在 React 中构建一个简单的应用程序，但我需要获取一个 api 来获取数据，并且我正在使用 React 上下文，所以我不需要将一堆道具传递给成分。但有时我需要拆分来自 api 的字符串，因为提取有时我会尝试拆分未定义的值，所以我得到一个错误。我该如何解决这个问题？我正在做的一个例子是这样的：

export const MyContext = createContext()
export const MyContextProvider = (props) => {
  const [data, setData] = useState({})
  const apiUrl = 'some api url'
  
  useEffect(() => {
    fetch(apiUrl)
      .then(res => res.json())
      .then(resData => setData(resData))
      .catch(err => console.error(err))
  }, [apiUrl]) // the dependencies because I use more states that modified the apiUrl

  return (
    data ?
      <MyContext.Provider
        value = {{data}}
      >
        {props.children}
      </MyContext.Provider>
    : <div></div>
  )
}

然后当我尝试这样做时：

data.someKey.split('some regex')

我收到错误，但我不知道如何解决这个问题

Answer 1

您正在执行一个异步请求，并且您的初始状态是一个空对象，如果您尝试控制台记录此!!{}

console.log(!!{}) // prints true because an empty object is a truthy value

所以基本上在你的渲染中，数据总是返回 true，即使你的请求还没有完成，有时你的代码会尝试访问 someKey 而它是未定义的，因为它当时不存在，您需要添加一些逻辑并在开始时使数据值为 false，我建议您将初始状态设置为 null。

const [data, setData] = useState(null);

这将使条件在请求开始时为假，如果一切成功，您应该有一个具有正确键的对象。

我还建议在尝试拆分之前验证密钥是否存在

data.someKey ? data.someKey.split('some regex') : ''

如何避免在获取 api 时传递给 props 的未定义对象属性 (ReactJS)

How to avoid undefined object property passed to props while fetching an api (ReactJS)

javascript

reactjs

react-context

如何避免在获取 api 时传递给 props 的未定义对象 属性 (ReactJS)

How to avoid undefined object property passed to props while fetching an api (ReactJS)

javascript

reactjs

react-context

如何避免在获取 api 时传递给 props 的未定义对象属性 (ReactJS)