React \ Redux render () не вызывается после изменения состояния

Question

Я пытаюсь заполнить выпадающий список с сервера в проекте React / Redux.Раскрывающийся список определен как компонент и встроен в родительский компонент.

Родительский компонент:

import React from 'react';
import Form from 'components/Form';
import { reduxForm } from 'redux-form';
import { Input } from 'components';
import FirstFormList from '../FirstFormList/FirstFormList.js';
import { firstform } from 'redux/modules/firstForm';

class FirstForm extends Form {
  render() {
    const {
      fields: { dateTime }
    } = this.props;
    return (
      <form onSubmit={this.handleApiSubmit(firstform)} className="form-horizontal">
        {this.renderGlobalErrorList()}
        <Input field={dateTime} label="Time Stamp" />
        <div className="form-group">
          <div className="col-md-1" />
          <label htmlFor="select1" className="col-md-1">Select Option</label>
          <div className="col-md-10">
            <FirstFormList />
          </div>
        </div>
        <div className="form-group">
          <div className="col-md-offset-2 col-md-10">
            <button type="submit" className="btn btn-default">Submit</button>
          </div>
        </div>
      </form>
    );
  }
}

FirstForm = reduxForm({
  form: 'firstform',
  fields: ['dateTime']
}
)(FirstForm);

export default FirstForm;

Дочерний компонент FirstFormList

import React from 'react';
import { connect } from 'react-redux';
import { fetchfirstformlist } from 'redux/modules/firstFormList';

class FirstFormList extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      items: []
    };
  }

  componentDidMount() {
    this.props.fetchfirstformlist();
  }

  render() {
    let optionItems = [];
    if (this.props.items !== undefined && this.props.items !== null) {
      const items = this.props.items;
      optionItems = items.map((item) =>
        <option key={item.value}>{item.label}</option>
      );
    }
    return (
      <div>
        <select className="form-control">
          {optionItems}
        </select>
      </div>
    );
  }
}

export default connect(
  state => ({ items: state.items }),
  { fetchfirstformlist })(FirstFormList);

Дочерний компонент-редуктор:

export const FIRSTFORMLISTFETCH_START = 'react/firstform/FIRSTFORMGETLIST_START';
export const FIRSTFORMLISTFETCH_COMPLETE = 'react/firstform/FIRSTFORMGETLIST_COMPLETE';
export const FIRSTFORMLISTFETCH_ERROR = 'react/firstform/FIRSTFORMGETLIST_ERROR';

const initialState = {
};

export default function reducer(state = initialState, action = {}) {
  switch (action.type) {
    case FIRSTFORMLISTFETCH_COMPLETE:
      return {
        ...state,
        items: action.result.items
      };
    default:
      return state;
  }
}

export function fetchfirstformlist() {
  return {
    types: [FIRSTFORMLISTFETCH_START, FIRSTFORMLISTFETCH_COMPLETE, FIRSTFORMLISTFETCH_ERROR],
    promise: (client) => client.post('/api/firstform/getfirstformlist')
  };
}

После срабатывания componentDidMount могут видеть элементы, возвращенные сервером в состоянии, если я установил точку останова в компоненте FirstFormList:

export default connect(
  state => ({ items: state.items }),
  { fetchfirstformlist })(FirstFormList);

Однако render ()компонента не срабатывает после прикрепления элементов к состоянию.

Answer 1

Я нашел проблему.Элементы списка хранятся в состоянии в state.firstFormList.items, а не в state.items.Экспорт должен быть:

export default connect(
  state => ({ items: state.firstFormList.items }),
  { fetchfirstformlist })(FirstFormList);

не

 export default connect(
      state => ({ items: state.items }),
      { fetchfirstformlist })(FirstFormList);

Answer 2

Хорошо, состояние в export default connect(state => ({ items: state.items }),{ fetchfirstformlist})(FirstFormList);

является состоянием редуктора, а не состоянием реакции.Таким образом, вы можете удалить this.state = {items: []};, так как вы не используете this.state.items в вашем рендере.Вы получаете this.props.items от connect state.items.

Во-вторых, проверяете ли вы журналы, чтобы увидеть, есть ли ошибки в редукторах.(Я полагаю, если action.result равно undefined, это приведет к ошибке action.result.items).Итак, можете ли вы проверить, что action.result не является неопределенным или присвоить ему значение по умолчанию, прежде чем пытаться использовать action.result.items?Вы также должны попытаться закомментировать строки, подобные той, что содержит обещание, и посмотреть, работает ли это.Строка с несколькими типами также выглядит подозрительно.Кроме того, вы можете попробовать добавить фигурные скобки к анонимным методам в один слой, добавить дополнительную запись в журнал и явное возвращение значений.

Кроме того, жизненный цикл реакции работает так, что конструктор вызывается только в первый раз , когда компонент визуализируется, а затем componentDidMount также вызывается только в первый раз Компонент рендеринга.

В-третьих, почему бы вам не отладить состояние приведения с помощью redux plugin или {console.log("test", this.props)} в вашем методе рендеринга и в вашем редукторе.Таким образом, вы определенно узнаете, где ошибка, поскольку предоставленной информации может быть недостаточно.

Если эти 3 шага не исправят ваш ответ или не помогут вам решить его, оставьте комментарий, и я помогу вам.