Question

由于标题中的错误，我有一个无法运行的大代码。这是我的代码的一个文件，谁能看到有什么问题？我相信它就是＆＃34; {this.state.todos.map（（todo，index）=＆gt;＆＃34;（代码行62）

我已将对象的名称大写，因此这不是问题（我认为）。 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>
    );
  }

Answer 1

更有可能是因为使用了html标签而不是本机组件。与hr span和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中使用破折号分隔符，除了字符串 - 可能的修复：style={style['list-group-item-heading']}
<View>{todo.todoDesc}</View> - 您必须使用Text compnent
<Button />组件需要道具title它应该是一个字符串，并且它没有OnClick处理程序但需要OnPress

总结一下 - 我会注意到本机反应使用jsx，但它不是html。它有自己的API，你必须仔细掌握它。

React-Native＆＃34;期望一个组件类，得到对象对象＆＃34;

1 个答案: