反应不在三元运算符中读取'userData'答案

【问题标题】：React not reading 'userData' in ternary operator反应不在三元运算符中读取'userData'
【发布时间】：2021-11-07 08:40:45
【问题描述】：

我正在使用 React 尝试从提供随机用户信息的 api 中提取数据。如果 userData == null，我需要返回“No user”，如果不是，则返回用户名和电子邮件。我正在尝试使用三元运算符来解决这个问题，但 React 一直希望我传播 userData。如果我这样做，它会继续告诉我 userData 没有定义。我是 React 新手，不知道该怎么做。有人可以给我一些见解吗？这是我的代码

import {useState, useEffect} from 'react'
import axios from 'axios'
import './App.css'
import UserSummary from './UserSummary.jsx'

function App() {
  const [user, setUser] = useState([])

  useEffect(() => {
    async function fetchUser() {
      const currentUser = `https://api.randomuser.me/`
      try {
        const res = await axios.get(currentUser)
        console.log(res.data)
        setUser(res.data)
      } catch (error) {
        console.log(error)
      }
    }
    fetchUser()
  }, [])

  return (
    <div className="App">
      <h1>Who's That User?</h1>
      <UserSummary 
        userData={'currentUser'} 
        {userData === null ? <h3>There is no user</h3> : <h3>{userData.name, userData.email}</h3>}
      />
    </div>
  );
}

export default App;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

import {useState} from 'react'
import React from 'react'

function UserSummary(props) {
   const {userData} = props
   return (
      <div></div>
   )
}

export default UserSummary

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

【问题讨论】：

标签： reactjs api async-await axios conditional-operator

【解决方案1】：

好吧，userData 未定义，您的状态变量称为user。然后您执行 userData={'currentUser'} ，它将该组件中的 userData 属性设置为 string "currentUser" - 如果将其初始化为 null，然后将其设置为您得到的响应（假设响应类似于{ name: '', email: '' }，并且实际上传递了该变量，然后它应该可以工作。像这样的东西：

import {useState, useEffect} from 'react'
import axios from 'axios'
import './App.css'
import UserSummary from './UserSummary.jsx'

function App() {
  const [user, setUser] = useState(null)

  useEffect(() => {
    async function fetchUser() {
      const currentUser = `https://api.randomuser.me/`
      try {
        const res = await axios.get(currentUser)
        console.log(res.data)
        setUser(res.data)
      } catch (error) {
        console.log(error)
      }
    }
    fetchUser()
  }, [])

  return (
    <div className="App">
      <h1>Who's That User?</h1>
      <UserSummary 
        userData={user} 
        {user === null ? <h3>There is no user</h3> : <h3>{user.name, user.email}</h3>}
      />
    </div>
  );
}

export default App;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

import {useState} from 'react'
import React from 'react'

function UserSummary(props) {
   const {name, email} = props
   return (
      <div></div>
   )
}

export default UserSummary

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

【讨论】：

【解决方案2】：

您将错误的道具传递给 UserSummary 组件。

应该是这样的

function App() {
  const [user, setUser] = useState([])

  useEffect(() => {
    async function fetchUser() {
      const currentUser = `https://api.randomuser.me/`
      try {
        const res = await axios.get(currentUser)
        console.log(res.data)
        setUser(res.data)
      } catch (error) {
        console.log(error)
      }
    }
    fetchUser()
  }, [])

  return (
    <div className="App">
      <h1>Who's That User?</h1>
      <UserSummary 
        userData={'currentUser'}
        isUserValid={Boolean(userData.length)} 
      />
    </div>
  );
}

export default App;


import { useState } from "react"
import React from "react"

function UserSummary(props) {
    const { userData, isUserValid } = props
    return (<div>
        {!isUserValid && (

            "User is not present"
        )}

        {isUserValid && (

            <h3> user.email </h3>
            <h3> {user.name} </h3>
        )}
        </div>)

export default UserSummary

【讨论】：