我正在尝试在ReduxForm上使用FieldArray

Question

我有一个带有待办事项嵌套数组的服务。在redux表单中，我试图从服务中找到待办事项，也就是说，我想单击以服务形式添加Todo，该按钮将打开comboBox以显示待办事项列表。我想这样做，但是页面空白。

这是我的模型service.js：

<img style="margin-top: 5px; **align: center;** max-width: 350px; max-height: 200px; display:block; margin-left: auto;
     margin-right: auto" src="img/${i.imageURLs.get(0)}" height="200" width="350" >

我的ActionTodos.js：

const mongoose = require('mongoose');
const { Schema } = mongoose;

const serviceSchema = new Schema({

     relatedTodos: 
        [{type: mongoose.Schema.Types.ObjectId, 
        ref:'todos'}]

      });

 mongoose.model('services', serviceSchema);

从reducer我的index.js：

 export const listTodos = () => async dispatch => {

  const res = await axios.get('/api/todos');
  dispatch({type: typestodos.LIST_TODOS, payload: res.data});
  }

我的ReducerTodos.js：

import reducerTodos from './ReducerTodos';
export default combineReducers({
  listTodos: reducerTodos,
 });

最后是我的serviceForm.jsx：

 import { typesTodos} from '../actions/types';

 const INITIAL_STATE = {
  listTodos: [],
  todo: {},
  loading: false,
  errors: {}
 };

 export default function(state = INITIAL_STATE, action) {
   switch (action.type) {

 case typesTodos.LIST_TODOS :
        return{
          ...state,
          listTodos: action.payload
        };

     default:
      return state;
   }
}

它向我显示此错误：

TypeError：无法读取null的属性“ listTodos”

这是错误所在的代码：

import React, { Component } from 'react';
import { reduxForm, Field,FieldArray} from 'redux-form';
import { Link } from 'react-router-dom';
import {listTodos} from '../../actions/ActionTodos';
import { connect } from 'react-redux';

class ServiceForm extends Component {

 renderArrayTodos = ({ fields, meta: { error } }) => (
      <ul>
        <li>
          <button type="button" onClick={() => fields.push()}>Add todo</button>
        </li>
            {fields.map((todos, index) =>
          <li key={index}>
            <button
              type="button"
              title="Remove Todo"
              onClick={() => fields.remove(index)}/>
             <Field
               name= 'relatedTodo'
               component={this.searchTodos}/>
               label: RelatedTodo
           </li>

         )}
         {error && <li className="error">{error}</li>}
       </ul>
     );
     searchTodos = ({ error,handleInputChange }) => (

       <div className="col-md-4 mb-3">
       <label >todos:</label>
       {handleInputChange && error && <span>{error}</span>}
       <select className="custom-select d-block w-100"  value={this.state.listTodos} 
 name="relatedTodos" onChange={this.handleInputChange} >

      { this.props.listTodos.map(todo => {

            return(
                    <option  key={todo._id}  value={todo._id}>name: {todo.name}</option>
                   )
                    })}
       </select>
       </div>

      );

 ArrayFieldTodos = props => {
      const { handleSubmit, pristine, reset, submitting } = props
       return(
         <form onSubmit={handleSubmit}>
         <FieldArray name="relatedTodos" component={this.renderArrayTodos} />
      <div>
        <button type="submit" disabled={submitting}>
           Submit
         </button>
         <button type="button" disabled={pristine || submitting} onClick={reset}>
        cleanValues
         </button>
       </div>
         </form>
       )
      }
 render() {
     const { handleSubmit, loading} = this.props;

if (loading) {
  return <span>loading...</span>;
}

return (
  <form onSubmit={handleSubmit}>

 <FieldArray
         name = 'relatedTodos'
          component ={this.ArrayFieldTodos}
          label = 'RelatedTodos'
               />

           <div>

       </div>

   <Link className='btn btn-light mr-2' to='/services'>
      Cancel
         </Link>
         <button className='btn btn-primary mr-2' type='submit'>
           {this.isUpdating ? 'Update' : 'Create'}
         </button>
      </form>
}

     function mapStateToProps(state){
       return{
        listTodos: state.listTodos.listTodos
       }
      }
      ServiceForm = connect(mapStateToProps,{listTodos})(ServiceForm);

 export default reduxForm({form:'service',validate:validations})(ServiceForm);

出什么问题了？如何改善代码？

我想将服务与待办事项联系起来