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

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、文本、选中} 的对象）。

Answer 1

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

Answer 2

我认为问题出在：

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

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