我正在创建一个react应用程序，用于状态管理。当调用dispatch时，它工作正常，并更新组件中的值。但当我试图使用它时，其他组件中的值是一个空数组（可能是初始状态）。看起来存储值更新了，但它只在一个组件中可用（从中调用use dispatch）
这就是它工作的地方

import React from 'react';
import { useEffect } from 'react';
import { useDispatch } from 'react-redux';
import { setNote, deleteNote } from './action';
import { useSelector } from 'react-redux';

export default function Account() {
  const dispatch = useDispatch();
  const notes = useSelector((state) => state.notes);
  console.log(notes);
  useEffect(() => {
    const token = localStorage.getItem('token');

    if (token) {
      fetch('http://localhost:3000/notes', {
        method: 'GET',
        headers: {
          'Content-Type': 'application/json',
          Authorization: `Bearer ${token}`,
        },
      })
        .then((response) => response.json())
        .then((data) => {
          dispatch(setNote(data));
        })
        .catch((error) => console.error(error));
    }
  }, []);

  function redirect() {
    window.location.href = '/new';
  }
  function handleEditButton(id) {
    window.location.href = `/edit/${id}`;
  }

  function handleDelete(id) {
    const token = localStorage.getItem('token');
    fetch(`http://localhost:3000/notes/${id}`, {
      method: 'DELETE',
      headers: {
        'Content-Type': 'application/json',
        Authorization: `Bearer ${token}`,
      },
    })
      .then((response) => response.text())
      .then((data) => {
        console.log(data);
        dispatch(deleteNote(id));
      })
      .catch((error) => console.error(error));
  }

  return (
    <div>
      <h1>Your Notes</h1>
      <button className="green" onClick={redirect}>
        Add New Note
      </button>
      {notes &&
        notes.map((note) => (
          <div className="note" key={note._id}>
            <h2>{note.title}</h2>
            <p>{note.content}</p>
            <p>Created: {note.dateCreated}</p>
            <p>Last Modified: {note.lastModified}</p>
            <button className="edit" onClick={() => handleEditButton(note._id)}>
              Edit Note
            </button>
            <button className="delete" onClick={() => handleDelete(note._id)}>
              Delete Note
            </button>
          </div>
        ))}
    </div>
  );
}

我的行动和减速器

export function addNote(notes) {
    return {
      type: 'ADD_NOTE',
      payload: notes
    }
  }
  
  export function updateNote(notes) {
    return {
      type: 'UPDATE_NOTE',
      payload: notes
    }
  }
  export function deleteNote(noteId) {
    return {
      type: 'DELETE_NOTE',
      payload: noteId
    }
  }
  

  export function setNote(notes) {
    return {
      type: 'SET_NOTE',
      payload: notes
    }
  }

const initialState = {
    notes: []
  }

export default function notesReducer(state = initialState, action) {
  
  switch (action.type) {
    case 'ADD_NOTE':
      return {
        ...state,
        notes: [...state.notes, action.payload]
      };
    case 'UPDATE_NOTE':
      return {
        ...state,
        notes: state.notes.map(note => note.id === action.payload.id ? action.payload : note)
      };
      case 'DELETE_NOTE':
        return {
          ...state,
          notes: state.notes.filter(note => note._id !== action.payload)
        };
      
      
  case 'SET_NOTE':
  return {
    ...state,
    notes: action.payload
  };

    default:
      return state
  }
}

我的应用程序组件。

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import notesReducer from './reducer.js'
import Account from './Account';
import Login from './Login';
import SignUp from './SignUp';
import Note from './Note';
import New from './New';
import Edit from './Edit';

const store = createStore(notesReducer);

function App() {
  return (
    <Provider store={store}>
    <Router>
      <Routes>
        <Route path="/login" element={<Login />} />
        <Route path="/" element={<SignUp />} />
        <Route path="/account" element={<Account />} />
        <Route path="/display" element={<Note />} />
        <Route path="/new" element={<New />} />
        <Route path="/edit/:id" element={<Edit/>} />

      </Routes>
    </Router>
    </Provider>
  )
}








export default App;

下面是我编辑组件，它是其中一个不能工作的组件。

import React, { useState } from "react";
    import { useSelector } from "react-redux";
    import { useParams } from "react-router-dom";

    export default function Edit() {
      const { id } = useParams();
      const note = useSelector(state => state.notes.find(note => note._id === id));
      const [title, setTitle] = useState(note.title);
      const [content, setContent] = useState(note.content);

      function handleEditNote() {
        const updatedNote = { id, title, content };
        // dispatch an action to update the note in the store and send a request to update the note on the server
      }

      return (
        <div>
          <div className="new">
            <h1>Edit Note</h1>
            <label>
              Title:
              <br />
              <input
                type="text"
                value={title}
                onChange={(e) => setTitle(e.target.value)}
              />
            </label>
            <br />
            <label>
              Content:
              <br />
              <textarea
                value={content}
                onChange={(e) => setContent(e.target.value)}
              />
            </label>
            <br />
            <button onClick={handleEditNote}>Save Changes</button>
          </div>
        </div>
      );
    }

即使我在编辑组件中控制台记录注解，没有Map它.它记录空数组.此外，帐户组件（它工作的地方），首先将其记录为空数组，它在获取和使用调度后填充.
我是新手，请帮帮忙。