在狀態更改后反應子組件不重新渲染

Question

我有一個子組件，它使用父組件的值作為子組件中的狀態，該值是使用 API 獲取的，因此第一次該值是 none 並且在獲取響應后該值會更新，但在第一次渲染之后值為 none 應用程序崩潰並且白屏卡住並且不會重新渲染。

我的父組件

export default function Profile() {
  const [user, setUser] = useState({});
  const PF = process.env.REACT_APP_PUBLIC_FOLDER;
  const username = useParams().username;

  useEffect(() => {
    const fetchUser = async () => {
      try {
        const res = await axios.get(
          `http://localhost:8000/api/users?username=` + username
        );
        setUser(res.data);
      } catch (e) {
        console.log(e);
      }
    };
    fetchUser();
  }, [username]);
return <>
             <child user={user} />
</>

子組件

export default function Rightbar({ user }) {
  const [followed, setFollowed] = useState(user.includes(user?.id))
  useEffect(() => {
},[user])
return(
//component
)
}

我在包含中變得不確定。

Answer 1

當我們進行 Http 調用來更新我們需要做 try {} 的狀態時，catch {} 以驗證獲取的數據不是 undefined 並且不等於 none ，有了這個測試條件，我們將確保我們的應用程序不會崩潰他去更新狀態。

Answer 2

在您的情況下，子組件在 HTTP 請求完成之前呈現並且用戶尚未設置為數據。 您可以將代碼重構為如下所示：

export default function Rightbar({ user }) {

//const [followed, setFollowed] = useState(user.includes(user?.id))
useEffect(() => 
{

}, [user])


let followed = false;

if(user && user.id)
{
     followed = true;
}



return (<>{followed}</>);

}

或者您可以等待 HTTP 調用完成並呈現子組件：

export default function Profile() {
const [user, setUser] = useState({});
const PF = process.env.REACT_APP_PUBLIC_FOLDER;
const username = useParams().username;

useEffect(() => {
  const fetchUser = async () => {
    try {
      const res = await axios.get(
        `http://localhost:8000/api/users?username=` + username
      );
      setUser(res.data);
    } catch (e) {
      console.log(e);
    }
  };
  fetchUser();
}, [username]);
return (<>
{user && <child user={user} />}
</>);

}