Массив полей Redux-forms просто отображает неопределенный элемент

Я новичок в реагировании и игре с редукс-формами, пытаясь следовать их руководству по массивам полей (https://redux-form.com/7.2.3/examples/fieldarrays/)

Идея состоит в том, чтобы изначально отображать 1 renderMenuItem-элемент, если props.MenuItems пуст, в противном случае он должен отображать renderMenuItem-элемент для каждого элемента в props.MenuItems.

Я сделал компонент menuInputFields, но он никогда не отображается (не отображается на html-странице, и функция render() никогда не вызывается), и я не понимаю, почему + элемент Values отображает странный элемент (см. рисунок) введите изображение  описание здесь console.log просто показывает, что я действительно могу получить доступ к экспорту по умолчанию menuInputFields

createMenuInputFields (мой компонент редукционной формы)

import React, { Component } from 'react'
import { connect } from 'react-redux'
import { reduxForm, Field, FieldArray } from 'redux-form'
import { menuSelector } from '../reducers/menuViewReducer'

const mapStateToProps = state => {
  return {
    initialValues: menuSelector.MenuItems(state),
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    onFormSubmit: dispatch(dispatch, setTodaysMenu)
  }
}

class menuInputFields extends React.Component {

  constructor(props){
    super(props)
  }


  render() {

    const renderField = ({ input, label, type, meta: { touched, error } }) => (
      <div>
          <input {...input} type={type} placeholder={label} />
          {touched && error && <span>{error}</span>}
      </div>
    );

    const renderMenuItem = ({fields, meta: {touched, error, submitFailed }}) => (
      <ul className='adminInputFoodItem'>
        {fields.map((menuItem, index) => (
          <li key={index}>
            <p className='col-lg-1'>{index+1}</p>
            <Field
              name={`${menuItem}.FoodItem`}
              type='text'
              component={renderField}
              label='Titel'
              className='col-lg-2 createFoodItemTitle'
            />
            <Field
              name={`${menuItem}.Description`}
              type='text'
              component={renderField}
              label='Beskrivelse'
              className='col-lg-6 createFoodItemDescription'
            />
            <Field
              name={`${menuItem}.Price`}
              type='text'
              component={renderField}
              label='Pris'
              className='col-lg-1'
            />
            <button 
              type='button'
              title='Fjern'
              onClick={() => fields.remove(index)}
              className='btn btn-default btn-xs'
            />
          </li> 
        ))}
          <li>
            <button
              type='button'
              onClick={() => fields.push({})}
              className='btn btn-default btn-xs'
              >Tilføj
            </button> 
          </li> 
      </ul>
    );

    const { handleSubmit, pristine, reset, submitting } = this.props

    return (
      <form onSubmit={handleSubmit}>
        <FieldArray name='menuItemList' component={renderMenuItem} />
        <div className=''>
          <button 
            className='btn btn-default'
            type='submit'
            disabled={submitting || pristine}
            >Gem Menu  
          </button>
        </div>  
      </form>  
    )
  }
}

menuInputFields = reduxForm({
  form: 'inputItemList',
})(menuInputFields)

export default connect(mapStateToProps, mapDispatchToProps)(menuInputFields)

Здесь компонент импортируется и добавляется в функцию рендеринга

import React, { Component } from 'react'
import { connect } from 'react-redux'
import { reduxForm, Field, FieldArray } from 'redux-form'
import { Values } from "redux-form-website-template";
import { postMenuRequest } from '../sagas/adminMenuSaga'
import { menuViewDataRequest } from '../sagas/menuViewSaga'
import { menuSelector } from '../reducers/menuViewReducer'
import menuInputFields from './createMenuInputFields'

const mapStateToProps = (state) => {
  return {  
    MenuItems: menuSelector.MenuItems(state),
    Id: menuSelector.Id(state),
    Date: menuSelector.Date(state)
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    postMenuData: (menu) => dispatch(postMenuData(menu)),
    menuDataRequest: () => dispatch(menuViewDataRequest())
  }
}


class adminSetMenuView extends React.Component {

  constructor(props){
    super(props)
  }

  componentWillMount(){
    this.props.menuDataRequest()
  } 



  render(){

    console.log(menuInputFields)

    return( 
      <div>
        <menuInputFields  />
        <Values form='inputItemList' />


      </div>

    )
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(adminSetMenuView)

объединение редукторов

import { combineReducers } from 'redux'
import { reducer as reduxFormReducer } from 'redux-form'

import menuViewList from '../reducers/menuViewReducer'

export default combineReducers({
  menuViewList,
  form: reduxFormReducer,
})

person BaconPancakes    schedule 26.02.2018    source источник


Ответы (1)


Я нашел ошибку. При кодировании пользовательских компонентов начальная буква всегда должна быть в верхнем регистре:

<someComponent /> ‹-- это не пользовательский компонент реакции

<SomeComponent /> ‹ -- заглавная буква указывает на пользовательский компонент

Таким образом, мое решение отлично работает после изменения объявления, экспорта и импорта компонента на правильное соглашение об именах.

person BaconPancakes    schedule 27.02.2018