Почему не обновляется страница в React?

Question

[SuperDuperPuper]

Когда я нажимаю на checkbox, меняется только стейт, но страница не обновляется.

import React,{useEffect, useState} from "react";
import {tests} from "../../TestData/mainData";
import Styles from "./Styles.module.css";
import {useParams} from "react-router-dom";


interface Test{
    id:string
}


const Test =  () =>{

    const refAnswers= React.createRef<HTMLDivElement>();

    let userAnswers = [];

    const [checked,setChecked] = useState<boolean[]>(new Array(10).fill(false));

    const {id} = useParams();

    const getTest = ()=>{
        let item;
        for(item of tests){
            if(item.id === id ){
                break;
            }
        }
        return item;
    }
    // const syncSetState = () =>{
    //     return new Promise((resolve:Function)=>{
    //         resolve();
    //     });
    // }
    
    // async function  changeHandler(index:number) {
    //     let arr:boolean[]  = checked;
    //     arr[index] = !arr[index];

    //     await syncSetState().then(()=>{setChecked(arr)});
    // }

    
    const changeHandler = (index:number) => {
        
        let arr:boolean[]  = checked;
        arr[index] = !arr[index];
        setChecked(arr);
        console.log(checked);
       
        
    }
    
    const changeQuistion = ()=>{
        console.log(refAnswers.current);
        let index = question.index + 1;
        setQuestion({
            index: index,
            name: test?.test.questions[index].name,
            text:test?.test.questions[index].text,
            answers: test?.test.questions[index].variants
        });

    }


    const test = getTest();

    const [question,setQuestion] = useState({
        index:0,
        name:test?.test.questions[0].name,
        text:test?.test.questions[0].text,
        answers:test?.test.questions[0].variants
    });

    return (
        <div className={Styles.main}>
            <div className={Styles.quistion}>
                
                <p className={Styles.quistion}>{question.text}</p>
                <div className={Styles.answers} ref={refAnswers}>
                    {question.answers?.map((value : string,index:number) => {
                        return <div className={Styles.checker}> - {value}
                        <input onChange={()=>changeHandler(index)} checked = {checked[index]} type = {"checkbox"}  /></div>
                    })}
                </div>

                <div className={Styles.buttons}>
                    <button onClick={changeQuistion}>Знаю</button>
                    <button>Не знаю</button>
                    <button>Пропустить</button>
                </div>
            </div>
        </div>
    )
}
export default Test;

Answer 1

[Mikhail Osher]

Ибо вы мутируете данные.

https://reactjs.org/docs/components-and-props.html
https://reactjs.org/docs/state-and-lifecycle.html
https://reactjs.org/docs/hooks-state.html

Comments

[SuperDuperPuper]

можно поподробнее?

[Mikhail Osher]

SuperDuperPuper, если Вы не поняли мой ответ, тогда Вам надо идти и изучать основы языка, а не пытаться сразу прыгать на использование библиотек/фреймворков.

https://learn.javascript.ru/ от корки до корки