重新提交组件后状态是否仍然存在？

Question

我想知道为什么在重新提交组件后我的状态仍然保持不变。

这是我的父组件

import React, {useEffect} from 'react';
import {connect} from "react-redux"
import NoteList from '../Components/NoteList';
import NoteDetail from '../Components/NoteDetail';

import "./NotePage.scss"

const NotePage = ({note}) => {

    const selectNote = (item) => {
        if (!item){
            return <div className="emptySection"/>
        }
        console.log("return a new component")
        return <NoteDetail/>
    }

    return (
        <div className="NotePage">
            <div className="noteList">
                <NoteList/>
            </div>
            <div className="noteDetail">
                {selectNote(note)}
            </div>
        </div>
    )
}

const mapState = (state) => (
    {
        note: state.notesReducer.note
    }
)

export default connect(mapState)(NotePage);

我已经检查了redux存储中的注释更改时是否重新渲染了此组件。 selectNote也可以正确执行。 但是它会返回NoteDetail的全新组件吗？

这是我的孩子部分：

import React, {useState, useRef, useEffect} from 'react';
import {connect} from "react-redux";
import Editor from 'draft-js-plugins-editor';
import {EditorState, ContentState} from "draft-js";
import CreateInlineToolbarPlugin from "draft-js-inline-toolbar-plugin";
import CustomInlineToolbar from "./CustomInlineToolbar";
import {updateNote} from "../redux/action"

import "./NoteDetail.scss";
import 'draft-js-inline-toolbar-plugin/lib/plugin.css';

const InlineToolbarPlugin = CreateInlineToolbarPlugin();
const {InlineToolbar} = InlineToolbarPlugin;

const NoteDetail = ({updateNote, title, note, date, _id}) => { 
    let initContentState = ContentState.createFromText(note);
    let [editorState, setEditorState] = useState(EditorState.createWithContent(initContentState));
    let [titleState, setTitleState] = useState(title)
    let editorRef = useRef(React.createRef());

    useEffect(()=>{
        updateNote(_id, titleState, editorState)
    },[editorState, titleState, _id])

    const focus = () => {
        editorRef.current.focus()
    }

    return(
        <div>
            <div className="NoteDetail-container">
                <input type="text" id="title" 
                    value={titleState === "Untitled Page"? "":titleState} 
                    onChange={(e)=>setTitleState(e.target.value)}
                />
                <div id="content" onClick={focus}>
                    <Editor 
                        plugins={[InlineToolbarPlugin]} 
                        onChange={(e)=>setEditorState(e)}
                        editorState={editorState}
                        ref={ele => editorRef.current = ele}
                    />
                    <CustomInlineToolbar InlineToolbar={InlineToolbar} />
                </div>
            </div>
        </div>
    )
};

const mapProps = (state) => {
    const {title, _id, note, date} = state.notesReducer.note
    return {
        title,
        _id,
        note,
        date
    }
}
export default connect (mapProps, {updateNote})(NoteDetail)

当音符状态更改时，它会重新显示，但状态保持不变。我检查标题是否更改，但titleState并未更改。那么状态和组件比较在React中的表现如何？

我的减速器：

import {
    GET_NOTE,
    UPDATE_NOTE,
    DEL_NOTE,
    CREATE_NOTE,
    SELECT_NOTE,
    GET_NOTES,
    } from "../action/types";
import {
    api_getNote,
    api_delNote,
    api_updateNote,
    api_postNote
    } from "../../api/noteService"


//TODOS: finish update_title part

const notesReducer = ( state={}, action) => {

    switch (action.type){ 

        case GET_NOTES:
            return{notes: action.payload}

        case UPDATE_NOTE:
            const {id, content} = action.payload
            api_updateNote(id,content)
            return state

        case DEL_NOTE:
            api_delNote(action.payload)
            return state

        case CREATE_NOTE:
            api_postNote(action.payload, (res)=> {
                return {notes: res}
            })
            return state

        case SELECT_NOTE:
            return {...state, note: action.payload}

        default:
            return state
    }
}

export default notesReducer