Question

我在state对象中有一个空白数组。该数组将包含一些具有键值对的对象。

这是我的代码：

import * as React from 'react';
import { Text, ScrollView, View, StyleSheet, TouchableOpacity, TextInput, ListView, Switch, Button } from 'react-native';
import { Constants } from 'expo';


export default class App extends React.Component {

  constructor(props){
    super(props);
    this.ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});

    this.state = {
      TodoTextVal: '',
      todos: []
    }

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

  addTodo() {
    id++;
    let TodoTextVal = this.state.TodoTextVal;
    //let arrVal = {id: id, text: TodoTextVal, checked: false}
    //this.setState(prevState => ({todos : [...prevState.todos, arrVal]}));
    this.setState({
      todos: [
        ...this.state.todos,
        {id: id, text: TodoTextVal, checked: false}
      ], 
    })

  }

  toggle(id) {

  }

  render() {
    return (
      <View style={styles.container}>
        <View style={{flexDirection: "row"}}>
          <TextInput
            onChangeText={(TodoTextVal) => this.setState({TodoTextVal})} 
            ref= {(el) => { this.TodoTextVal = el; }}
            style={[styles.input, {flex: 2} ]} 
            placeholder="Add Todo..."/>
          <TouchableOpacity onPress={this.addTodo} title="+ Add" style={styles.button} >
            <Text>Add</Text>
          </TouchableOpacity>
        </View>

        <ListView 
          dataSource={this.ds.cloneWithRows(this.state.todos)}
          renderRow={(data) => <View><Text>{data}</Text></View>} />

      </View>
    );
  }
}

let id = 0

这里的问题是this.setState()没有更新状态。我也尝试了两种您在addTodo()中看到的同时注释了代码的方法。

但是这两种方法都向此消息抛出错误：

设备：（96：380）永久违反：对象作为React无效子级（找到：具有键{id，text，checked}的对象）。

Answer 1

我认为问题出在

renderRow={(data) => <View><Text>{data}</Text></View>}

数据是一个对象，您正在尝试呈现它。 JSX无法呈现对象，而是选择数据对象的任何键来构造HTML。

Answer 2

首先，停止使用ListView。已弃用，其次，更新您的renderRow方法以呈现对象的单个键而不是完整的对象。

无法使用RN中的对象数组更新状态

2 个答案: