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“预计组件类，获得对象对象”

回答

相关问题