无法使用 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、text、checked} 的对象）。

Answer 1

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

Answer 2

我认为问题出在：

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

数据是一个对象，您正在尝试渲染它。 JSX 不能渲染对象，而是选择数据对象的任意键来构造你的 html。