React-Native「預計組件類，獲得對象對象」

我有一個大代碼，由於標題中的錯誤而無法運行。這是我的代碼的一個文件，任何人都可以看到什麼是錯的？我相信它是「{this.state.todos.map（（todo，index）=>」（代碼行62）React-Native「預計組件類，獲得對象對象」

我已經大寫了對象的名稱，所以這不是問題（我想）。 NPM -v 4.6.1

import React, { Component } from 'react'; 
//import $ from 'jquery'; 
import { Button, View, FormGroup, FormControl, ControlLabel } from 'react-native'; 
import { Text } from 'react-native-svg' 

/* generating sample data to be shown, these data names are used to access the values*/ 
var todos = []; 

//Will not work first time, since list do not exist in AsyncStorage. 
//Get from AsyncStorage. 
try{ 
    todos = JSON.parse(AsyncStorage["todos"]); 
}catch(ex){ 
    console.log("Not working" + ex); 
    todos = []; 
} 

//Errormessage for errorhandeling. 
var errorMessage = ""; 
/*--------------------*/ 

class Todos extends Component { 
    constructor(props) { 
    super(props); 

    this.state = { 
     todos 
    }; 

    this.handleAddTodo = this.handleAddTodo.bind(this); 
    } 

    handleAddTodo(todo) { 
    /* creates todo in list that shows*/ 
    this.setState({todos: [...this.state.todos, todo]}); 
    /*this code saves in AsyncStorage*/ 
    todos.push(todo); 
    //AsyncStorage... 
    AsyncStorage.setItem("todos", JSON.stringify(todos)); 
    } 


/* function that removes todos from the list*/ 
    handleRemoveTodo(index) { 
    this.setState({ 
     todos: this.state.todos.filter(function(e, i) { 
     return i !== index; 
     }) 
    }) 
    /* now working as expected*/ 
    todos.splice(index, 1); 
    AsyncStorage.setItem("todos", JSON.stringify(todos)); 
    } 

    render() { 
    return (
     <View> 
     <TodosInput onAddTodo={this.handleAddTodo} /> 
     <hr /> 
      <Text>todo count: <span>{this.state.todos.length}</span></Text> 
      <View> 
      <View>{this.state.todos.map((todo,index) => 
       <View key={index}> 
       <Text style={style.list-group-item-heading}>{todo.todoTitle}<small><span style={style.label} label-info></span></small> </Text> 

       <View>{todo.todoDesc}</View> 

       <Button bsStyle="danger" onClick={this.handleRemoveTodo.bind(this, index)}><span style={style.glyphicon} glyphicon-trash></span></Button> 
       </View> 
      )}</View> 
     </View> 
     </View> 
    ); 
    }

來源

2017-10-17 Per Morten Solheim

這是因爲使用的HTML標籤，而不是原有成分的可能性更大。像hrspan和small。

所以，你需要創建自己的組件還可以標註他們的名字以下是可能的例子如何解決你的問題：

const Small = ({ children }) => (
    <Text 
    style={{ 
     fontSize: 10 
    }} 
    > 
    {children} 
    </Text> 
); 

const HR =() => (
    <View 
    style={{ 
     height: 1, 
     borderBottomColor: "black", 
     borderBottomWidth: 1 
    }} 
    /> 
); 

export default class App extends React.Component { 
    render() { 
    return (
     <View style={styles.container}> 
     <View> 
      <Text>This is span</Text> 
     </View> 
     <View> 
      <Text> 
      Regular test <Small>With {"<small>"} text</Small> Inside 
      </Text> 
     </View> 
     <View> 
      <Text>This is {"<HR />"} bellow</Text> 
      <HR /> 
     </View> 
     </View> 
    ); 
    } 
}

UPD：其實有一個代碼了很多其他錯誤上面

快速的可能的問題清單：

尖的dalready - 取代所有帶有本地組件的html標籤
style={style.list-group-item-heading}您不能在js中使用破折號分隔符，除了ni字符串 - 可能的修正：style={style['list-group-item-heading']}
<View>{todo.todoDesc}</View> - 你必須wrao文本與Text構成元素
<Button />組件都需要道具title它應該是一個字符串，以及它不到風度有OnClick處理程序，但需要OnPress

總結 - 我會注意到，反應原生使用jsx，但它不是HTML。它有自己的API，你必須仔細把握。

來源

2017-10-17 18:16:46 Vlad

React-Native「預計組件類，獲得對象對象」

回答

相關問題