javascript - 无法使用 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() 中看到的对代码进行注释的方法。

但这两种方法都会抛出错误并显示以下消息:

Device: (96:380) Invariant Violation: Objects are not valid as a React child (found: object with keys {id, text, checked}).

Answer 1

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