如何结合 hooks(useEffect) 与 axios

Question

我正在尝试使用来自 <p> 元素上的 jsonplaceholder 的 axios 查看导入的 JSON 的直接值并出现类型错误。

为了解决这个问题，我尝试在状态内创建布尔语句（就像我一直做的那样），并在父元素内使用 style={{ display: isLoaded ? "block" : "none" } 来防止它呈现 null。

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>
)

如何结合 hooks(useEffect) 与 axios

How to combine hooks(useEffect) with axios

reactjs

axios

react-hooks