在 ReactJS 中使用 useState 时出现问题：更新页面上的组件

Question

Moved it all to the one file so I could copy-paste it in here. So the issue coming in forcing ReactDOM re-render HTML table with useState(). As i understood useState is made to automatically update the innerHTML, force to render again or something like that.

import React, {useState, useEffect} from 'react';
import ReactDOM from 'react-dom/client';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <App />
);

function App() {
    const [data, setData] = useState([]);
    useEffect(() => {
        fetch('/api/data')
        .then(response => response.json())
        .then(response => setData(response))
    }, []);
    if(data.length == 0){
      return (<>loading(if takes too long may crashed)</>);
    }
    var da = data;
    var headers = [da[0]];
    headers = headers.map(e => {return {name: e[0], spec_prof:e[1], enrl:e[2], drms:e[3], bdgt:e[4], edu_type:e[5], inst_type:e[6], cnct_inf:e[7], higher_or_scndry:e[8]}});
    headers = headers[0];
    da = da.slice(1, data.length);
    return(<>
    <Test_component hdrs={headers} data={da}/>
    </>);
};
  
const Test_component = function (data) {
    const [table, setTable] = useState(data.data);

    var headers = data.hdrs;
    var da = data.data;


    function Extra_filter_func() {
    var filters = document.getElementById('extras');
    filters.hidden = !filters.hidden
    };


    function Search() {
        var da = data.data;
        da = da.filter(e => e[0].includes(document.getElementById('namesearch').value));
        da = da.filter(e => e[1].includes(document.getElementById('specsearch').value));
        da = da.filter(e => e[2].includes(document.getElementById('on_base_of').value));
        if(document.getElementById('dorms').checked) {
            da = da.filter(e => e[3].includes('есть'));
        };
        if(document.getElementById('budget').checked) {
            da = da.filter(e => e[4].includes('да'));
        };
        da = da.filter(e => e[5].includes(document.getElementById('education_type').value));
        return(da);
      };


    if(headers.name != 'Название') {
      return(<> Ожидание таблицы </>);
    };
    da = da.map(e => {return {name: e[0], spec_prof:e[1], enrl:e[2], drms:e[3], bdgt:e[4], edu_type:e[5], inst_type:e[6], cnct_inf:e[7], higher_or_scndry:e[8]}});
    return (<>
      <input id='namesearch' placeholder='Поиск по названию'></input>
      <button onClick={() => setTable(Search())}> Поиск... </button>
  
      <p> <button id='extra_filter_btn' onClick={Extra_filter_func}> Дополнительные настройки поиска </button> </p>
      
      <div id='extras' hidden>
      <p> <input id='specsearch' placeholder='Поиск по специальностям и профессиям'></input> </p>
  
      <p> Можно поступить <select id="on_base_of">
      <option value=''>На базе 9/11</option>
      <option value='на базе 9 кл'>На базе 9</option>
      <option value='на базе 11 кл'>На базе 11</option>
      </select> </p>
      
      <p> Наличие общежития: <input id="dorms" type='checkbox'></input> </p>
  
      <p> Наличие бюджетных мест: <input type='checkbox' id="budget"></input> </p>
  
      <p> Тип обучения: <select id="education_type">
      <option value=''>Без разницы</option>
      <option value='очно'>очно</option>
      <option value='заочно'>заочно</option>
      <option value='очно/заочно'>очно/заочно</option>
      </select> </p>
      </div>
    <table className='tbl' id='tbl'>
        <thead>
        <tr>
          <th> {headers.name} </th>
          <th> {headers.spec_prof} </th>
          <th> {headers.enrl} </th>
          <th> {headers.drms} </th>
          <th> {headers.bdgt} </th>
          <th> {headers.edu_type} </th>
          <th> {headers.inst_type} </th>
          <th> {headers.cnct_inf} </th>
          <th> {headers.higher_or_scndry} </th>
        </tr>
        </thead>
        <tbody>
        {da.map((val, key) => {
              return (
                <tr key={key}>
                  <td>{val.name}</td>
                  <td>{val.spec_prof}</td>
                  <td>{val.enrl}</td>
                  <td>{val.drms}</td>
                  <td>{val.bdgt}</td>
                  <td>{val.edu_type}</td>
                  <td>{val.inst_type}</td>
                  <td>{val.cnct_inf}</td>
                  <td>{val.higher_or_scndry}</td>
                </tr>
              )
            })}
        </tbody>
      </table>
      </>);
};

So in Test_component() function I've created useState() hook 'const [table, setTable] = useState(data.data);' and assigned as initialState a list with lists inside that I'm getting from backend. In the function Search() I'm filtering the variable(same list of lists) with values and then returning it straight into setTable().

Had to add in Test_component()

if(headers.name != 'Название') {
  return(<> Ожидание таблицы </>);
};

and in App()

if(data.length == 0){
  return (<>loading(if takes too long may crashed)</>);
}

because of errors I was getting while data is not collected from backend, frontend even crashes. It doesn't connected with main issue anyhow, just wanted to clarify what are those checkers for in case you've questioned yourself with that.

I was trying to create second render on another div like this one, but I kind of don't know how it actually works so

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <App />
);

but I kind of don't know how it actually works, so created something like that. First of all whole code looked a little bit different. In 'root' i was rendering just filters and search button while in 'table_root' i was rendering the table

const root = ReactDOM.createRoot(document.getElementById('table_root'));
root.render(
    <Test_component />
);

Unfortunately, it got stuck on checker that was blocking the whole code until request to backend wasn't finished. Probably because I've used useState wrong again. That was the only one idea I've got in mind to do. I guess I just can't understand how exactly useState hook works and how to force re-render ReactDOM.

Answer 1

 const [data, setData] = useState([]);
    useEffect(() => {
        fetch('/api/data')
        .then(response => response.json())
        .then(response => setData(response))
    }, [data]);

Add data in dependancy array of useEffect may be you will find your solution

Answer 2

Well the thing was just with

da = da.map(e => {return {name: e[0], spec_prof:e[1], enrl:e[2], drms:e[3], bdgt:e[4], edu_type:e[5], inst_type:e[6], cnct_inf:e[7], higher_or_scndry:e[8]}});

it should've look like

da = table.map(e => {return {name: e[0], spec_prof:e[1], enrl:e[2], drms:e[3], bdgt:e[4], edu_type:e[5], inst_type:e[6], cnct_inf:e[7], higher_or_scndry:e[8]}});

was updating use useState thing but wasn't using it in rendering page.