Question

我正在尝试使用axios从JSONplaceholder上的'p'元素查看导入的JSON的直接值，并得到类型错误。

为解决此问题，我试图在状态内做出布尔语句（就像我一直做的那样），并在父元素内使用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元素内显示对象的值，但实际结果却相反-> “ TypeError：无法读取未定义的属性'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结合

1 个答案: