Как получить начальные значения для приставки из состояния?

Question

Я использую свои формы с реактивным редуксом.У меня такая же форма для редактирования и создания новой.

Я хочу, чтобы при открытии формы при редактировании я ставил начальные значения формы из моего API.

Я уже попробовал официальную документацию, но она не работает.

Это моя форма:

class Form extends Component {

  componentDidMount () {
    const tripId = this.props.match.params.uid;
    if(tripId){
      this.fetchData(tripId);
    }
  }

  fetchData = async (tripId) => {
    axios.defaults.headers.common['Authorization'] = 'token';
    axios.defaults.headers.common['Accept'] = 'application/vnd.trips.v1+json';
    await axios.get(`myurl`) 
    .then(res => {
      const trip = res.data;
      this.setState({ 
        trip: trip,
        isLoading: false,
        initialValues: trip
      });
    })
    console.log('Terminou de carregar')
  }

(....)
Form = reduxForm({ form: 'trip', enableReinitialize : true })(Form)
const mapStateToProps = state => {
  const { intl, vehicleTypes, users, dialogs, trip } = state

  return {
    intl,
    vehicleTypes,
    users,
    dialogs,
    initialValues: trip
  }
}

export default connect(
  mapStateToProps, { setDialogIsOpen }
)(injectIntl(withRouter(withTheme()(Form))))

Но мои начальные значения никогда не заполняются и всегда остаются пустыми.Я отлаживал код и вижу, что мой API загружает и устанавливает состояние в моем методе fetchData.Итак, что я здесь делаю не так?

Answer 1

Как сказал @ d7my, ваша ошибка в том, что вы пытаетесь изменить prop через setState, это разные вещи в реагирующем мире.Самый быстрый способ решить вашу проблему, это заменить его на:

this.setState({
   trip: trip,
   isLoading: false,
   initialValues: trip
});

Для:

this.props.initialize(trip)

Проп initialize экспортируется с помощью избыточной формы в ваш компонент для обновленияначальное состояние формы.Я сделал codesandbox , где вы можете проверить его работоспособность.

Сказал, что, я полагаю, вам следует изменить структуру вашего компонента, вместо того, чтобы загружать данные внутри компонента (componentDidMount), выследует сделать это внутри действия притока, а затем обновить ваше состояние.Поступая таким образом, вы можете легко получить данные формы из вашего состояния приращения в функции mapStateToProps и установить initialValues prop вместо использования initialize props, что намного лучше.

Answer 2

Во-первых, вы пытаетесь передать initialValues через this.setState, что не сработает, reduxForm ожидает, что initialValues будет передано как props.

Одна вещь, которую стоит упомянутьразница между application state и component local state, первое состояние приложения - однозначно управляется при помощи редукса, а другое состояние локального компонента - управляется реакцией, которую можно изменить, вызвав this.setState

поэтому, чтобы это исправить, вы должны отправлять действие, когда получаете данные от вашего API, и вы обновляете свои реквизиты в mapStateToProps

ваш код должен выглядеть следующим образом:

class Form extends Component {

  componentDidMount () {
    const tripId = this.props.match.params.uid;
    if(tripId){
      this.fetchData(tripId);
    }
  }

  fetchData = async (tripId) => {
    await axios.get(`https://toptal-backend-fmaymone.c9users.io/trips/${tripId}`) 
    .then(res => {
      const trip = res.data;
      this.props.fillTheForm(trip);
    })
    console.log('Terminou de carregar')
  }

(....)
Form = reduxForm({ form: 'trip', enableReinitialize : true })(Form)
const mapStateToProps = state => {
  const { intl, vehicleTypes, users, dialogs, trip } = state

  return {
    intl,
    vehicleTypes,
    users,
    dialogs,
    initialValues: trip
  }
}

const fillTheForm = (dispatch) => (trip) => {
  // here you dispatch the action and update your application state
  // in your reducer when this action is dispatched,
  // then mapStateToProps should be called and the data you just
  // passed in your reducer should be in (state)
  dispatch()
}

export default connect(
  mapStateToProps, { setDialogIsOpen, fillTheForm }
)(injectIntl(withRouter(withTheme()(Form))))