保存錯誤後重置 - 不恢復到正確的初始值

Question

我有一個很奇怪的錯誤。我已複製了簡單的測試情況在這裏：https://codesandbox.io/s/PNyPwyWP2

我還上傳了一個截屏解釋，該截屏是在YouTube網站 - https://youtu.be/iILiFieO-gk

我的目標是，我有一個字段窗體，按鈕「重置」和一個「保存」按鈕。單擊「保存」將表格值保存到我的store中的縮減器中，名爲save。單擊「重置」應將表單值重置爲最後的「原始」值（initialValues中的值）。

但我的問題是，在保存表格後，「重置」按鈕應將其重置爲「原始」值（新保存的值，initialValues中的值），但將其重置爲「舊的原始值「

這裏是我的全部應用程序的代碼：

import React from 'react' 
import ReactDOM from 'react-dom' 
import { Provider } from 'react-redux' 
import { createStore, combineReducers } from 'redux' 
import { connect } from 'react-redux' 
import { Field, reduxForm, reducer as form } from 'redux-form' 

// ACTION & ACTION CREATOR 
const SAVE_FORM = 'SAVE_FORM'; 
function saveForm(values) { 
    return { 
    type: SAVE_FORM, 
    values 
    } 
} 
// REDUCER - save 
const INITIAL = { url:'hiiii' }; 
function save(state=INITIAL, action) { 
    switch(action.type) { 
    case SAVE_FORM: return action.values; 
    default: return state; 
    } 
} 


// STORE 
const reducers = combineReducers({ form, save }); 
const store = createStore(reducers); 

// MY FORM COMPONENT 
class MyFormDumb extends React.Component { 
    handleReset = e => { 
    e.preventDefault(); 
    this.props.reset(); 
    } 
    render() { 
    console.log('MyFormDumb :: pristine:', this.props.pristine, 'initialValues:', this.props.initialValues); 
    return (
     <form onSubmit={this.props.handleSubmit}> 
     <label htmlFor="url">URL</label> 
     <Field name="url" component="input" type="text" /> 
     <button onClick={this.handleReset}>Reset</button> 
     <button type="submit">Save</button> 
     </form> 
    ) 
    } 
} 

const MyFormControlled = reduxForm({ form:'my-form' }); 

const MyFormSmart = connect(
    function(state) { 
    return { 
     initialValues: state.save 
    } 
    } 
); 

const MyForm = MyFormSmart(MyFormControlled(MyFormDumb)); 

// MY APP COMPONENT 
class App extends React.PureComponent { 
    submitHandler = (values, dispatch, formProps) => { 
    dispatch(saveForm(values)); 
    } 
    render() { 
    return (
     <Provider store={store}> 
      <div className="app"> 
      <MyForm onSubmit={this.submitHandler} /> 
      </div> 
     </Provider> 
    ) 
    } 
} 

// RENDER 
ReactDOM.render(<App />, document.getElementById('app')) 

Answer 1

請您reduxForm組件上使用enableReinitialize: true標誌，as per the docs。