ReactNative（組件`input`的查看配置getter回呼必須是一個函式（收到`undefined`）。確保以組件名稱開頭）

有一個缺口。我正在開發一個用于測驗的應用程式。

錯誤：組件的查看配置 getter 回呼input必須是一個函式（已接收undefined）。確保組件名稱以大寫字母開頭。

我有 3 個檔案，data.js（這里我獲取有關測驗的資訊（各種初始資料）），testMath.js（這個檔案把它們放在一起），Questions.js（在這有一個與資料的互動)

救命！我需要人幫助））

資料.js：

export const data = {
    testName:"TestName",
    questions:[
      {
      title:"question?",
      code: "___ d = 123;",
      variants : [
         {title: "const", "flag": true},
         {title: "var"},
         {title: "let"}
      ]
      },
       {
      title:"question?",
      code: "let с;",
      variants : [
         {title: "undefined", "flag": true},
         {title: "null"},
         {title: "number"}
      ]
      },
       {
      title:"question",
      code: "",
      variants : [
         {title: "вариант1", "flag": true},
         {title: "вариант2", "flag": true},
         {title: "вариант3"}
      ]
      },{
      title:"question",
      code: "",
      variants : [
         {"text": "1", "flag": "const"}
      ]
      }
    ]
    }

    export default data

testMath.js

import { ReactDOM } from 'react';
import { StyleSheet, View, Text, Image } from 'react-native';
import { gStyle } from '../styles/style';
import { data } from './data'
import Questions from './Questions'


export default function testMath() {
  
    return (
      
      <View style={gStyle.main}>
        
          <Text style={styles.h1}>Hello! </Text>
          <Questions data={data} />
          
      </View>
      
    );

}

const styles = StyleSheet.create({
  h1: {
    textAlign: 'center',
    fontSize: 24,
    fontFamily: 'Oswald-Bold',
  }
});

問題.js：

import { View, Text, StyleSheet } from 'react-native';
import {input} from "react-native-web";


export default function Questions({ data }) {
    
    let questions = data.questions
    questions = questions.map(function(el, index){
    let j = 0
    let variants = el.variants.map(function(e, i) {
        j  
        return (
            <View>
            <input type="checkbox" id={'id'   j} /> 
            <label for={'id'   j}> {el.title}</label> 
            </View>
        )
    })

        return ( 
            <View>
                <Text style={styles.questionHead}> {el.title} </Text>
                <Text style={styles.questionExample}>{el.code} </Text>
                {variants}
            </View>
        )
    })
    

return (
    <View>
        <Text style={styles.testTeme}> 
            {data.testName}
        </Text>
            {questions}
    </View>
)

}
const styles = StyleSheet.create({ 
    testTeme: {
        textAlign: 'center',
        paddingTop: 15,
        fontFamily: 'Oswald-Bold',
        fontSize: 25,
    },
    questionHead: {
        textAlign: 'center',
        paddingTop: 15,
        fontFamily: 'Oswald-Bold',
        fontSize: 20,
    },
    questionExample: {
        paddingTop: 10,       
        fontSize: 18,
        textAlign: 'center',
        fontFamily: 'Oswald-light',
    },
    
})```

uj5u.com熱心網友回復：

你在里面使用 HTML 元素Questions.js：

<input type="checkbox" id={'id'   j} />
<label for={'id'   j}> {el.title}</label>

閱讀有關 react-native TextInput 的更多資訊

標籤：javascript 反应 反应原生

上一篇：如何在讀取檔案時擺脫vb.net中的空行

下一篇：如何使帶有flex的div容器僅使用一列