我正在尝试在ReduxForm上使用FieldArray

我有一个带有待办事项嵌套数组的服务。在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);

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

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

heiheie 回答:我正在尝试在ReduxForm上使用FieldArray

暂时没有好的解决方案,如果你有好的解决方案,请发邮件至:iooj@foxmail.com
本文链接:https://www.f2er.com/3131316.html

大家都在问