Reactjs 如何将挂钩（useEffect）与axios组合

我试图从

元素上的jsonplaceholder中查看使用axios导入的JSON的直接值，并获取类型错误

为了解决这个问题，我尝试在state中使用boolean语句（就像我一直做的那样），并在父元素中使用

style={{{display:isLoaded？”块“：“none”}

，以防止它呈现null

const[serverData，setData]=useState（）
const[count，setCount]=useState（0）
常量[isLoaded，setLoad]=useState（false）
useffect（（）=>{
让数据={
url:“https://jsonplaceholder.typicode.com/users",
方法：“获取”
}
//-------------------------------------------//
requestData代表常规axios请求
//------------------------------------------//
请求数据（数据）。然后（res=>{
设data=res.data；
setData（数据）
}).catch（错误=>{
console.log（错误）
})
}, [])
//------------------------------------------------------------//
在更改serverData值后，应更改isLoaded
如果serverData不为null，则应将isLoaded更改为true
//-----------------------------------------------------------//
useffect（（）=>{
if（服务器数据）{
设置加载（真）
}
}，[serverData]）
返回(
setCount（count+1）}>单击我：{count}次



配置文件id={serverData[count].id}

{/* ------------------------------------ */}
{/*只有在执行{serverData？serverData[count].id:'}时，此操作才有效，并且我不想依赖于该*/}
{/*我想在我的状态中设置布尔值，并像：*/}
{/*  */}
{/* ------------------------------------ */}
我还没准备好。。。
)

我希望防止在父元素上使用布尔安全语句呈现“null”，并在p元素中显示对象的值，但实际结果正好相反->

---

TypeError:无法读取未定义的属性“0”。

您应该有条件地呈现，而不是使用CSS隐藏或显示，否则数据仍将被计算

const [serverData, setData] = useState()
const [count, setCount] = useState(0)
const [isLoaded, setLoad] = useState(false)

useEffect(() => {
    let data = {
        url: "https://jsonplaceholder.typicode.com/users",
        method: "get"
    }
    //-------------------------------------------//
      requestData stand for regular axios request
    //------------------------------------------//
    requestData(data).then(res => {
        let data = res.data;
        setData(data)
    }).catch(err => {
        console.log(err)
    })
}, [])

//------------------------------------------------------------//
  this should change isLoaded after changing serverData value
  if the serverData is not null it should change isLoaded to true
//-----------------------------------------------------------//
useEffect(() => {
    if (serverData) {
        setLoad(true)
    }
}, [serverData]) 

if(!isLoaded) {
    return null;
}

return (
    <div>
        <div>
            <center>
                <button onClick={() => setCount(count + 1)}>Clicked me: {count} times</button>
                <br></br>
                <p>Profile id = {serverData[count].id}</p> 
                {/* ------------------------------------ */}
                {/* This work only if i do {serverData? serverData[count].id : ""} and i dont want to relay on that */}
                {/* I want to set boolean in my state and work with it like: */}
                {/* <div style={{ display: isLoaded ? "block" : "none" }}> */}
                {/* ------------------------------------ */}

            </center>
        </div>
        <div style={{ display: isLoaded ? "none" : "block" }}>I"m not ready yet...</div>
    </div>
)

const[serverData，setData]=useState（）
const[count，setCount]=useState（0）
常量[isLoaded，setLoad]=useState（false）
useffect（（）=>{
让数据={
url:“https://jsonplaceholder.typicode.com/users",
方法：“获取”
}
//-------------------------------------------//
requestData代表常规axios请求
//------------------------------------------//
请求数据（数据）。然后（res=>{
设data=res.data；
setData（数据）
}).catch（错误=>{
console.log（错误）
})
}, [])
//------------------------------------------------------------//
在更改serverData值后，应更改isLoaded
如果serverData不为null，则应将isLoaded更改为true
//-----------------------------------------------------------//
useffect（（）=>{
if（服务器数据）{
设置加载（真）
}
}，[serverData]）
如果（！已加载）{
返回null；
}
返回(
setCount（count+1）}>单击我：{count}次



配置文件id={serverData[count].id}

{/* ------------------------------------ */}
{/*只有在执行{serverData？serverData[count].id:'}时，此操作才有效，并且我不想依赖于该*/}
{/*我想在我的状态中设置布尔值，并像：*/}
{/*  */}
{/* ------------------------------------ */}
我还没准备好。。。
)

非常感谢！我今天刚刚读到了关于钩子的内容，在一直使用纯类组件之后尝试了它，这导致我看不到完整的图片。