状态更改后未调用 React\Redux 渲染（）

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);

子组件reducer：

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')
  };
}

如果我在FirstFormList组件中设置断点，componentDidMount触发后可以看到服务器返回的项目状态：

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

但是，组件的 render() 在项目附加到状态后不会触发。

Answer 1

好的，export default connect(state => ({ items: state.items }),{ fetchfirstformlist})(FirstFormList);中的状态

是 reducer 状态，它不是 React 状态。因此，您可以删除 this.state = {items: []};，因为您没有在渲染中使用 this.state.items。 您正在从 connect state.items 获取 this.props.items。

其次，您是否检查日志以查看减速器中是否存在错误。 （我猜如果action.result 是undefined 它会在action.result.items 上抛出一个错误）。那么，在尝试使用 action.result.items 之前，您是否可以检查 action.result 是否未定义或为其分配默认值？您还应该尝试注释掉带有 promise 的行，看看它是否有效。具有多种类型的线也看起来很可疑。 此外，您可以尝试将花括号添加到您的单行匿名方法中，并添加额外的日志记录并显式返回值。

此外，react 生命周期的工作方式是构造函数被调用只在第一次组件呈现，然后 componentDidMount 也被调用只在第一次组件渲染。

第三，你为什么不在你的渲染方法和你的reducer中使用redux plugin或{console.log("test", this.props)}来调试redux的状态。这样您一定会找出错误所在，因为提供的信息可能不够充分。

如果这 3 个步骤不能解决您的问题或无法帮助您解决问题，请发表评论，我会帮助您。

Answer 2

我发现了问题。列表项存储在 state.firstFormList.items 而不是 state.items 中的状态中。导出应该是：

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

不是

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