React/Redux, перегрузочный компонент в пути

Question

У меня есть типичный список строк в основной CRUD экране, каждая строка, как обычно, со ссылкой:

<Link to={"/appointment/"+appointment.id+"/"}>Edit</Link> 

Мой маршрут:

<Route path="/appointment/:id" component={AppoModal} /> 

, когда я нажмите кнопку «Изменить» в любой строке появляется диалог модальный:

Если я нажмите в первой ссылке «Изменить» все работает нормально. Но если я нажму кнопку «Закрыть» в диалоговом окне и попробую снова нажать ссылку «Изменить», модальный диалог не будет запущен, я думаю, это происходит, потому что компонент уже «вверх».

Шкура/показать поведение диалога контролируется this.state.showModal значение в компоненте AppoModal:

constructor(props) { 
    super(props); 
    this.state = { showModal: true }; 
} 

Так что я не знаю, как «перезагрузка» или «повторно запустить "компонент. Могу ли я запускать отправку (действие) каждый раз, когда я нажимаю ссылку «Изменить»? Я слышал о «статическом методе», но я слишком новичок с React, чтобы узнать, является ли это путем.

Thx!

Answer 1

Проблема возникает из-за того, что при нажатии кнопки «Закрыть» вы меняете состояние компонента, но вы не меняете состояние приложения.

Поскольку ваш модальный номер открывается с изменением маршрута, он также должен закрываться с изменением маршрута.

Answer 2

Вы можете использовать другой подход и избегать изменения маршрута вместе. Поскольку вы используете сокращение, вы можете иметь глобальное состояние, которое может содержать модальное имя как константу или, может быть, содержать ссылку на компонент.

Теперь у вас может быть модальный компонент, который будет отображать компонент в зависимости от глобального изменения состояния, и вы можете вызвать этот компонент где-то в корневом компоненте.

так что ваш редуктор выглядит

export function modalState(state=null, action) { 
    if(action.payload.name == "CLOSE_MODAL") return null; 
    else if([/*modal names*/].includes(action.payload.name) { 
    return {modal: action.payload.name, .data: action.payload.data} 
    } else return {...state} 
} 

и у вас есть такое действие, как

export function openModal(name, data) { 
    return { 
    type: "MODAL_NAME", 
    payload: { name, data } 
} 

export function closeModal() { 
    return { type: "CLOSE_MODAL", payoad: null } 
} 

и компонента может выглядеть

const componentMaps = { 
    [MODAL_1] : import MODAL_1 from "./modals/Modal_1.jsx" 
} 
cont Modal = React.createClass({ 
    render: function() { 
    let Component = componentMaps[this.props.modal.name] 
    if(Component) { 
     return <Component {...this.props.modal.data}/> 
    } else { 
     return null; 
    } 
    } 
}); 

export connect(select)(Modal);