如何将钩子(useEffect)与axios结合起来

Question

我试图从元素上的json占位符中查看带有axios的导入JSON的直接值<p>并得到类型错误。

为了解决这个问题，我尝试在状态内制作布尔语句(像往常一样(，并在父元素中使用style={{ display: isLoaded ? "block" : "none" }以防止它呈现为空。

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]) 
return (
    <div>
        <div style={{ display: isLoaded ? "block" : "none" }}>
            <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>
)

我希望防止在父元素上使用布尔安全语句渲染"null"，并在 P 元素中显示对象的值，但实际结果相反 ->"类型错误： 无法读取未定义的属性'0'"。

Answer 1

而不是使用 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>
)