從組件外的 function 傳遞道具反應

Question

感謝您花時間閱讀這個問題。 我有一個名為 loginstatus() 的 function，它評估登錄狀態，我希望它改變下面的 state。 我不知道在哪里放置道具，以便能夠改變 state。 簡要說明您進行編輯的位置和原因會很棒，在此先感謝

const [count, setCount] = useState();

我已經完成了所有其他工作，我只想了解如何更改 state。

應用程序.js

import { useEffect, useState } from "react";
import './App.css';
import 'semantic-ui-css/semantic.min.css'
import { Login } from './functions/login/login.js';
import { Logout } from './functions/login/logout.js';
import { loginstatus } from './functions/login/loginstatus.js';
import { currentloginid } from './functions/login/loginid.js';
import { ViewUser } from './functions/users/viewuser.js';
import { CreateUser } from './functions/users/createuser.js';
import { ViewAllUsersComponent } from './functions/users/viewallusers.js';
import { ViewQuestionComponent } from './functions/question/viewquestion.js';

function Process(props) {
  console.dir(props.count);
  if (props.count === "Logged In") {
    return (
      <>
        <ViewUser />
        <Logout setCount={props.setCount} />
        <CreateUser />
        <ViewAllUsersComponent />
        <ViewQuestionComponent />
      </>
    );
  } else {
    return <Login setCount={props.setCount} />;
  }
}
function App() {
  const [count, setCount] = useState();
  useEffect(() => {
    loginstatus();
  }, []);

  return <Process count={count} setCount={setCount} />;
}


export default App;

登錄狀態.js

export function loginstatus() {
    fetch('http://localhost/gotaquestion/api/api.php?action=loginstatus', 
        {
            method: 'GET',
            credentials: 'include'
        })
        .then(function(response) {
        if (response.status == 202) {
            props.setCount("Logged In");         
        } else {
            props.setCount("Not Logged In");
        }
        })
}

Answer 1

props是 React 中的一個特殊關鍵字，它代表屬性，用於將數據從一個組件傳遞到另一個組件。 您的loginStatus function 不是反應組件，並且無權訪問您的 Components 道具。 更多信息在這里： https://reactjs.org/docs/components-and-props.html

要實現您想要的，您可以將 function 作為參數傳遞給您的loginStatus function，如下所示：

有關函數和 arguments 的更多信息： https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Functions

function App() {
  const [count, setCount] = useState();

  const loginSuccess = () => {
    setCount("Logged In"); 
  }

  const loginFailed = () => {
    setCount("Not Logged In"); 
  }

  useEffect(() => {
   loginstatus(loginSuccess, loginFailed);
  }, []);

  return <Process count={count} setCount={setCount} />;
}

登錄狀態.js

export function loginstatus(successCb, errorCB) {
 fetch('http://localhost/gotaquestion/api/api.php?action=loginstatus', 
    {
        method: 'GET',
        credentials: 'include'
    })
    .then(function(response) {
    if (response.status == 202) {
        successCb();         
    } else {
        errorCb();
    }
    })
 }