Redux-forms Fields Array 只是渲染一个未定义的元素

Question

我是刚接触和玩弄 redux-forms 的新手，试图按照他们关于字段数组的教程进行操作 (https://redux-form.com/7.2.3/examples/fieldarrays/)

这个想法是，如果 props.MenuItems 为空，则最初渲染 1 个 renderMenuItem-element，否则它应该为 props.MenuItems 中的每个元素渲染一个 renderMenuItem-element。

我已经制作了一个组件menuInputFields，但它从不渲染（没有显示在 html 页面上，并且永远不会调用 render() 函数），我不明白为什么 + Values 元素会呈现一个奇怪的元素（见图）console.log 只是为了表明我实际上可以访问默认导出menuInputFields

createMenuInputFields（我的 redux-form 组件）

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,
})

Answer 1

我发现了错误。编写自定义组件时，起始字母应始终为大写：

<someComponent />

<SomeComponent />

因此，在将组件的声明、导出和导入更改为正确的命名约定后，我的解决方案可以完美运行。