So, I am building a website that tries to first post an id from the front end then on the php file. The post method return a questions that is base on the id that is send to the backend and query through the database. This is my code
<?php
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Headers: access");
header("Access-Control-Allow-Methods: GET,POST");
header("Content-Type: application/json; charset=UT-8");
header("Access-Control-Allow-Headers: Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With");
$servername = "localhost";
$username = "root";
$password = "";
$database= "credentials";
// Create connection
$db = mysqli_connect($servername, $username, $password, $database);
// Check connection
if ($db->connect_error) {
die("Connection failed: " . $db->connect_error);
}
$postdata = file_get_contents("php://input");
if(isset($postdata) && !empty($postdata)){
$request = json_decode($postdata);
$quizID = $request->QuizID;
$sql = "SELECT * FROM question WHERE QuizID='$quizID'";
$result = mysqli_query($db,$sql);
if(mysqli_num_rows($result)>0){
$json_array = array();
while($row = mysqli_fetch_assoc($result))
{
$json_array[] = $row;
}
$response = ["data"=>"valid","quiz"=>$json_array];
echo json_encode($response);
}else{
$response = ["data"=>"invalid"];
echo json_encode($response);
}
}
?>
The front end was successfully return the JSON data but it keeps looping non stop. Why is that happening, I tried running the query first then I store in variable but still it keeps looping.
This is my front end code
useEffect(()=>{
console.log("use effect");
const sendData = {
QuizID: localStorage.getItem("quizID")
}
console.log("adad")
axios.post("http://localhost/pepep/fetchLesson.php", sendData).then(res=>{
console.log("post success");
console.log(res.data.quiz[0]);
setQuestion([res])
})
})
Can anyone help me with this ?
You have setQuestion([res]) which will set the state to a new value.
Setting the state will trigger a re-render.
Your useEffect call doesn't have a dependency array, so it will run on every render.
Add a dependency array with a list of variables that should trigger the function when they change.
Since you don't appear to be using any external variables, it looks like that should be none.
useEffect( () => { /* ... */ }, [] );