javascript - 失败的 prop 类型 : The prop `options` is marked as required in `signupCheckBoxes` , 但其值为 `undefined`

Question

当我收到此错误时，我正在创建一个 react native 组件..

Failed prop type: The prop `options` is marked as required in `signupCheckBoxes`, but its value is `undefined`.

基本上，我正在做的是传递一个数组，其中包含我想要渲染的对象的类型

const inputFields = [
  {
    key: 'dob', 
    type: 'dateTyper', //change this to Dob component
    label: 'Your Date of birth',
    helper: 'Your Birthdate will help us in connecting you with people of similar age',
    required: true
  }, 
  {
    key: 'gender', 
    type: 'checkboxes', 
    label: 'Gender',
    required: true, 
    templateOptions: {
      multipleSelect: true,
      options: ['Male', 'Female', 'Others']
    }
  ]

然后当用户迭代数组时映射组件

   export const SignupFormComponent = (props) => {
        const {
        keyboardAutoOpenForText, 
        inputFields, 
        buttonStyle, 
        ProgressBarProps,  
        backgroundViewColor, 
        defaultColor, 
        helperTextStyle, 
        globalButtonText,
        buttonTextStyle,
        textStyle,
        onButtonClick,
        errorStyle,
        defaultErrorMessage
      } = props
           // All the component 
  const [index, setIndex] = useState(0)
  const [payload, setPayloadData] = useState({})
  const [Loading, toggleLoadingData] = useState(false)
  const [Error, setErrorData] = useState({status: false, message: ''})
  // Current Component based on indux
  const currentComponent = inputFields[index]
  const {key, type, label, helper, buttonText} = currentComponent
  const templateOptions =  currentComponent.templateOptions || {}
  // if no template options, initlalize an empty object
  const {number, placeHolder, templateStyle, options}  = templateOptions
  const usedButtonText =  buttonText || globalButtonText
  // Setting up/mutating props 

  // --- Progress bar ---
  ProgressBarProps.currentProgress = index 
  ProgressBarProps.totalNumberOfProgressBars = inputFields.length
  ProgressBarProps.colorOfProgressBar = ProgressBarProps.colorOfProgressBar || defaultColor

  const onChangeHandler = (data, errorMessage=null) => {
    if (!errorMessage) {
      const currentData = {...payload}
      currentData[key] = data
      setPayloadData(currentData)
    } else {
      setErrorData({status: true, message: errorMessage})
    }
  }

  const getValueFromState  = async () => {
    setErrorData({status: false, message: ''})
    toggleLoadingData(true)
    const currentValue = payload[key]
    try {
      const eventTrack = await onButtonClick(index, key, currentValue, payload)
      if (index < inputFields.length) setIndex(index + 1)
      return toggleLoadingData(false)
    } catch (error) {
      if (error.message) setErrorData({status: true, message: error.message})
      else setErrorData({status: false, message: defaultErrorMessage})
      return toggleLoadingData(false)
    }
  }


          const mapSignUpComponents = {
            text: (
                <TextInput  
                  placeholder={placeHolder}
                  number={number}
                  style={[{color: defaultColor, borderColor: defaultColor}, styles.defaultTextInputStyle, templateStyle]}
                  onChangeText={text => onChangeHandler(text)}
                  value={payload[key] ? `${payload[key]}` : ''} // Doesn't seem right but otherwise the value of the text input also get mutate with other values
                />),
            dateTyper: (
              <DateTyper
              textInputStyle={[{color: defaultColor, width: (Dimensions.get('window').width * 0.6)/8 }, styles.nextInputStyle, templateStyle]} 
              upsideEmit={onChangeHandler}/>
            ),
            checkboxes: (
              <CheckBoxes 
              options={options}
              />
            )
          }


          const renderComponent = mapSignUpComponents[type]
          return (
               <View> 
               {renderComponent}
             <View>
          )
    }

最初，组件应该是 dateTyper (const renderComponent = mapSignUpComponents[type])，因此甚至不需要 options 键，因此选项 未定义

options 是 checkboxes 组件的必需 Prop ，但由于我们没有渲染它，我不确定为什么会出现上述错误

如果有人能帮我解决同样的问题，我将不胜感激。

我的复选框组件如下所示

import React, {useState} from 'react'
import PropTypes from 'prop-types'
import { CheckBox } from 'react-native-elements'
import { View, Text } from 'react-native'

const signupCheckBoxes = (props) => {
  const { options, multipleSelect} = props
  console.log(options)
  return (
    <View>
    <Text> Hello</Text>

    </View>
  )
}

signupCheckBoxes.propTypes = {
  options: PropTypes.array.isRequired,
  multipleSelect: PropTypes.bool
}

signupCheckBoxes.defaultProps = {
  multipleSelect: true
}



export default signupCheckBoxes

Answer 1

看来你正在做<CheckBoxes options={options} />即使options未定义。这基本上意味着初始化该组件(但不调用渲染函数)。在初始化期间，React 将检查所有必需的 props 是否可用，然后抛出错误。

要解决这个问题，我会执行以下操作:

const mapSignUpComponents = {
            text: (
                <TextInput  
                  placeholder={placeHolder}
                  number={number}
                  style={[{color: defaultColor, borderColor: defaultColor}, styles.defaultTextInputStyle, templateStyle]}
                  onChangeText={text => onChangeHandler(text)}
                  value={payload[key] ? `${payload[key]}` : ''} // Doesn't seem right but otherwise the value of the text input also get mutate with other values
                />),
            dateTyper: (
              <DateTyper
              textInputStyle={[{color: defaultColor, width: (Dimensions.get('window').width * 0.6)/8 }, styles.nextInputStyle, templateStyle]} 
              upsideEmit={onChangeHandler}/>
            ),
            checkboxes: options === undefined ? undefined : (
              <CheckBoxes 
              options={options}
              />
            )
          }

希望这会有所帮助!