1 
// EditableNote.js
function EditableNote({ note }) {
    const [editableNote, setEditableNote] = useState(note);
    const { title, content } = editableNote;

    const dispatch = useDispatch();

    useEffect(() => {
        setEditableNote(note);
    }, [note]);
›
    useEffect(() => {
        dispatch(saveEditableNote(editableNote));   // I think here is problem
    }, [dispatch, editableNote]);

    const handleBlur = e => {
        const name = e.target.id;
        const value = e.currentTarget.textContent;
        setEditableNote({ ...editableNote, [name]: value });
    };

    return (
        <EditNote spellCheck="true">
            <NoteTitle
                id="title"
                placeholder="Title"
                onBlur={handleBlur}
                contentEditable
                suppressContentEditableWarning={true}>
                {title}
            </NoteTitle>
            <NoteContent
                id="content"
                placeholder="Note"
                onBlur={handleBlur}
                contentEditable
                suppressContentEditableWarning={true}>
                {content}
            </NoteContent>
        </EditNote>
    );
}

export default EditableNote;

我有 EditableNote 组件，它是 contentEditable。我通过其父级的道具设置其初始状态（注）。因此，如果注释中的某些内容发生了变化，那么 editableNote 就必须更改。为了保持最近的道具状态，我使用了 useEffect。一切似乎运作良好。

这是一个问题。如果我首先更改笔记和打字的颜色，它会按预期更新。但相比之下，如果我第一次输入并更改颜色，editableNote 状态不会更新。

// Reducer.js
 case actions.GET_NOTE_COLOR: 
            return {                
                ...state,
                bgColor: action.payload
            }
        case actions.CHANGE_NOTE_COLOR: 
            return {                    
                ...state,
                notes: state.notes.map(note => note.id === action.payload ? 
                    { ...note, bgColor: state.bgColor } 
                    : note       
                )
            };
        case actions.SAVE_EDITABLE_NOTE: // payload is old value
            return { 
                ...state,
                editableNote: action.payload,
            }

我检查一个动作中发生了什么。我发现在 CHANGE_NOTE_COLOR 之前一切正常，但是当调度 SAVE_EDITABLE_NOTE 时，它的有效负载没有更新！

我不知道..请..帮帮我...TT

4

1 回答 1

0

您必须使用connect提供的包装器redux将redux 连接到您的 actions组件https://react-redux.js.org/api/connectstate

于 2020-08-20T12:29:24.143 回答