Ошибка при на нажатии на кнопку?

Question

[Алексей Яковлев]

При нажатии на кнопку:

<button
  onClick={() => {
   dispatch(setViewNotes(true));
  }}
  className="blocks-view header__settings-button"
  >
   <img
      src="./images/blocks-black.svg"
      alt="blocks"
   />
</button>

появляется ошибка:

Uncaught Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.

App.tsx:

import React from 'react';
import Header from './components/Header';
import Sidebar from './components/Sidebar';
import NoteText from './components/NoteText';
import {useSelector, useDispatch} from 'react-redux';
import {setNotesAction} from './redux/actions/index';
import {BrowserRouter, Switch, Route} from 'react-router-dom';

const App: React.FC = () => {
  const dispatch = useDispatch();
  const notesStorage = JSON.parse(localStorage.getItem('notes') || '[]');
  dispatch(setNotesAction(notesStorage));
  const notesRedux = useSelector((state: any) => state.notes.items);
  const view = useSelector((state: any) => state.view);

  return (
    <div className="app">
      <Header notes={notesRedux} />
      <main className="app__content">
        <BrowserRouter>
          {view ? <Route exact path="/">
            <Sidebar notes={notesRedux} view={view} />  
          </Route> : <Sidebar notes={notesRedux} view={view} />}
          
          <Switch>
            <>
              <Route exact path="/create">
                <NoteText
                  title='Новая заметка'
                  time={new Date().toDateString()}
                  text='No additional text'
                  create={true}
                />
              </Route>
              {notesRedux.length ? notesRedux.map((item: any,index: any) => {
                return (
                  <Route exact path={"/note/"+index} key={index}>
                    <NoteText
                      title={item.title}
                      time={item.time}
                      text={item.text}
                      create={false}
                    />
                  </Route>
                )
              }) : false}
            </>
          </Switch>
        </BrowserRouter>
      </main>
    </div>
  );
}

export default App;

Header.tsx:

import React from 'react';
import {useDispatch} from 'react-redux';
import {setViewNotes} from '../redux/actions/index';

interface IHeader {
  notes: Object[]
}

const Header: React.FC<IHeader> = ({notes}) => {
    const dispatch = useDispatch();

    function deleteNote() {
        const url = window.location.href.split('/');
        const currentId = url[url.length-1];
        
        if (currentId !== '') {
            const notes = JSON.parse(localStorage.getItem('notes') || '[]');
            const currentNote = notes.filter((item:any,index:any) => {
                return index === +currentId;
            })[0];

            const newNotes = notes.filter((item:any,index:any) => {
                return currentNote.title !== item.title;
            });

            localStorage.setItem('notes', JSON.stringify(newNotes));
            window.location.reload();
        } else {
            alert('Заметка не найдена');
        }
    }

    return (
        <header className="header">
            <div className="container">
                <div className="header__settings">
                    <div className="header__settings-block">
                        <button
                            onClick={() => {
                              dispatch(setViewNotes(false));
                            }}
                            className="list-view header__settings-button"
                        >
                            <img
                                src="./images/lines-black.svg"
                                alt="lines"
                            />
                        </button>
                        <button
                            onClick={() => {
                              dispatch(setViewNotes(true));
                            }}
                            className="blocks-view header__settings-button"
                        >
                            <img
                                src="./images/blocks-black.svg"
                                alt="blocks"
                            />
                        </button>
                    </div>
                    <button onClick={() => deleteNote()} className="header__settings-button">
                        <img src="./images/delete-black.svg" alt="delete" />
                    </button>
                    <button className="header__settings-button">
                        <img src="./images/edit-black.svg" alt="edit" />
                    </button>
                </div>
                <form action="/" className="header__search">
                    <input
                        type="text"
                        placeholder="Search"
                        required
                    />
                </form>
            </div>
        </header>
    )
}

export default Header;

Comments

[B1dloKoder]

Скиньте код setViewNotes и редюсера

Answer 1

[Alexandroppolus]

Сильно подозреваю, что проблема связана вот с этими строками в App

const notesStorage = JSON.parse(localStorage.getItem('notes') || '[]');
dispatch(setNotesAction(notesStorage));
const notesRedux = useSelector((state: any) => state.notes.items);

dispatch надобно выполнять в useEffect, в данном случае - однократно, с [] в депенденсах