метод класса, вызываемый клонированным дочерним элементом, не вызывающий setState () при перезагрузке страницы - PullRequest
0 голосов
/ 08 мая 2019

У меня есть компонент-обертка, который отображает формы как дочерние. Оболочка клонирует дочерние элементы и передает свои методы как подпорки дочерним элементам. Дочерние элементы вызывают переданные реквизиты из оболочки. В общих чертах это выглядит примерно так:

class Wrapper extends React.Component {
    constructor(props){//...init code}

    //method that sets the state according to arguments passed when called
    customInput(key,value){
        this.setState({
            [key]:value
        })
    }

    render(){
        return (
        {React.Children.map(
                    this.props.children,
                    child => React.cloneElement(child, {
                        handleInputChange: this.handleInputChange,
                        customInput : this.customInput,
                        loading: this.state.loading
                    })
                )}
        )
    }

Я бы использовал оболочку так:

const FormComponent = (props) => (
  <React.Fragment>
    <MyFormElementComponent selectMonth={props.customInput}/>
  </React.Fragment>
)



class FormContainer extends React.Component {

render(){
  return (
    <Wrapper>
      <FormComponent/>
    </Wrapper>
  )
}

}

Компонент при монтировании вызывает метод customInput(), который был передан оболочкой, а customInput() устанавливает состояние компонента оболочки.

Я хочу отметить, что мой код работает, поэтому настройка кажется правильной, и я уже некоторое время так его использую, однако я только недавно заметил, что он НЕ работает, когда я перезагружаю страницу. Цель состоит в том, чтобы позволить элементу формы установить некоторые данные «по умолчанию» в состоянии оболочки, когда он монтируется. Это хорошо работает, когда я монтирую / перемещаюсь откуда-то еще в приложении.

Однако, если я перезагружаю страницу, все монтируется правильно (если я console.log(key,value) внутри customInput() зарегистрированные значения верны, однако это НЕ обновляет состояние.

Я не понимаю, почему setState () не устанавливает состояние при монтировании только при перезагрузке страницы, но работает нормально, если я монтирую его из другого места в приложении.

Подведем итог:

Компонент обертки клонирует дочерний элемент и передает методы как реквизит дочернему элементу. Этот метод устанавливает состояние в Wrapper.

при монтировании дочерний метод вызывает метод и передает аргументы.

Оболочка обновляет состояние с помощью переданных аргументов.

В большинстве случаев работает, кроме перезагрузки страницы.

Помощь

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...