Невозможно обновить состояние с массивом объектов в RN - PullRequest
Новая
       6

Невозможно обновить состояние с массивом объектов в RN

0 голосов
/ 11 января 2019

У меня есть пустой массив в объекте 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) Нарушение инварианта: объекты недействительны в качестве реакции child (найдено: объект с ключами {id, текст, проверен}).

Ответы [ 2 ]

0 голосов
/ 11 января 2019

Во-первых, прекратите использовать ListView. Во-вторых, это устарело, обновите метод renderRow, чтобы отображать отдельные ключи объекта вместо полного объекта.

0 голосов
/ 11 января 2019

Я думаю, что проблема в:

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

Данные - это объект, и вы пытаетесь его отобразить. JSX не может отображать объекты, вместо этого выберите любой ключ объекта данных для создания HTML.

...