Как работать с компонентами React Forms

Question

Я пытаюсь сделать простую форму, но после 10 примеров / уроков я до сих пор не понимаю некоторые аспекты :)

Сценарий: я получаю данные с помощью избыточного действия / редуктора, поэтому модель поступает в props.reduxResponse в этой форме:

reduxResponse: { 
    name: "123", 
    anotherField: "456"
}

основной компонент, где я получаю данные (и я надеюсь, что я могу сделать вызов обновления :)):

class Service extends Component {

  state = {
    reduxResponse: {}
  }

  componentDidMount() {
    this.props.getService(this.props.match.params.id);
  }

  handleSubmit = service => { this.props.saveService(service) }

  render() {
    let { reduxResponse = {} } = this.props;

    return (
      <div>
        <h3>Infos</h3>
        <ServiceBasicInfoForm 
          service = { reduxResponse }
          handleSubmit={(service) => this.handleSubmit(service)}/>
      </div>
    );
  }
}

const mapStateToProps = state => ({
  getService: PropTypes.func.isRequired,
  saveService: PropTypes.func.isRequired,
  reduxResponse: state.reduxResponse.payload
});
export default withRouter(
  connect(mapStateToProps, { getService, saveService })(Service)
);

и форма

class ServiceBasicInfoForm extends Component {
  state = {
    service: {
      name: "",
      anotherField: {},
    }
  };

  handleSubmit = event => {
    props.handleSubmit(service); 
  };

  componentDidUpdate(prevProps, prevState, snapshot) {
    if(this.props.service != prevProps.service){
      this.setState({ service: this.props.service });
    }
  }

  handleChange = event => {
    event.persist();
    this.setState({ [event.target.name]: event.target.value });
  };

  render() {

    let { service = {} } = this.props;

    return (
      <div>
        <ValidatorForm
          ref="form"
          onSubmit={this.handleSubmit}
          onError={errors => null}
        >
          <Grid container spacing={6}>
            <Grid item md={4} spacing={6}>
              <TextValidator
                value={this.state.service.name}
                ..... other props
              />
            </Grid>

            ..... other fields

          </Grid>
        </ValidatorForm>
      </div>
    );
  }
}

export default ServiceBasicInfoForm;

и я не могу точно понять, как я могу передать props.reduxResponse из Service в ServiceBasicInfoForm, затем отредактировать эти значения, обработать submit и как возвращаемые значения после submit будут обновлены в ServiceBasicInfoForm

Это пример примера, потому что Сервис будет содержать ~ 4 формы.

Answer 1

Я думаю, что есть ряд проблем с вашим кодом. Я постараюсь обратиться ко всем из них. Прежде всего, mapStateToProps сопоставляет состояние Redux с компонентами. Вы поместили сопоставленный объект reduxResponse в состояние вашего компонента. При рендеринге вы также перезаписываете сопоставленную реквизит, присваивая значение {}. При создании ServiceBasicInfoForm вы передаете service как опору, но, насколько я понимаю, это нигде не определено. Что это должно быть? Если вы хотите передать reduxResponse, просто сделайте это:

<ServiceBasicInfoForm reduxResponse= {reduxResponse}/>

Это будет доступно в ServiceBasicInfoForm с:

const {reduxReponse} = this.props;

Что касается «редактирования» реквизита - вы никогда не должны этого делать. Внутреннее состояние компонента должно сохранять его состояние, а не его реквизиты. Если вы хотите, чтобы ServiceBasicInfoForm возвращался к Сервису в определенный момент, пусть Service передается в функцию обратного вызова, имеющую опору для ServiceBasicInfoForm:

<ServiceBasicInfoForm reduxResponse={reduxResponse} callback={data => this.handleCallbackData(data)}/>

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

Поскольку вы используете redux, вы можете также рассмотреть пропуская прохождение этих реквизитов вообще. Вместо этого вы можете подключить ServiceBasicInfoForm к состоянию избыточности и обновить его при поступлении данных (используя mapDispatchToProps) и позволить внешнему компоненту Service прослушивать глобальное состояние (используя mapStateToProps).