Reactjs 如何使listview中的动态数据源成为本地数据源？

我不知道我的代码怎么了。我正在尝试创建一个待办事项列表。我正在使用listview。我有两个组件，Todo和AddTodo

主要成分

import React, { Component } from 'react';
import { View, Text, TextInput, StyleSheet, ListView } from 'react-native';
import * as moment from 'moment';
import TodoList from '../compoents/TodoList';
import {TodoModel, ITodo} from '../models/TodoModel';

interface TodoProps{
    todo: TodoModel;
    ter:string;
}
interface TodoState{
    dataSource: any;
    myTodo: Array<ITodo>;
}


export default class Todo extends React.Component <TodoProps,TodoState>{

    constructor(props:TodoProps) {
        super(props);

        const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => true});
        this.state = {
            dataSource: ds,
            myTodo: []
        };

    }

    componentWillMount = () => {
        console.log(this.state.myTodo);
        let data = {
            title: this.props.ter
        };

        if (this.props.ter) {
          this.state.myTodo.push(data);
        }

        this.setState({
            dataSource: this.state.dataSource.cloneWithRows(this.state.myTodo),
            myTodo: this.state.myTodo
        });
    }

    render() {

        return (
            <View style={{marginTop: 60}}>
                <ListView enableEmptySections={true} dataSource={this.state.dataSource} renderRow={(rowData) => <TodoList data={rowData} /> } />
            </View>
        )
    }
}

import * as React from "react";
import { Alert, View, Text, StyleSheet, TextInput, TouchableOpacity } from 'react-native';
import {TodoModel} from '../models/TodoModel';
import { Actions} from 'react-native-router-flux';
interface TodoState{
    todoText?: string;
}
interface TodoProps{
    text: string;
}
export default class AddTodo extends React.Component <TodoProps,TodoState> {

    constructor(props:TodoProps){
        super(props);
        this.state = {
            todoText:" "
        };
    }

    handleSubmit = () => {

        Actions.todo({ter: this.state.todoText});
    }

    render() {
        return (
            <View style={{margin: 128, marginLeft: 15, marginRight:15}}>
                <Text>ADD</Text>
                <TextInput autoCorrect={false} style={styles.input} placeholder='Todo' onChangeText={(text) => this.setState({todoText:text})} value={this.state.todoText} />
                <TouchableOpacity onPress={this.handleSubmit.bind(this)}>
                    <Text style={styles.button}>Submit</Text>
                </TouchableOpacity>
            </View>
        )
    }
}


const styles = StyleSheet.create({
    button: {
        backgroundColor: '#ccc',
        color: 'white',
        height: 40,
        lineHeight: 30,
        marginTop: 10,
        textAlign: 'center',
        alignSelf: 'stretch',
        borderRadius: 5,
        justifyContent: 'center',
        alignItems: 'center',
    },
    container: {

    },
    input: {
        borderColor: '#ededed',
        borderRadius: 5,
        borderWidth: 1,
        height: 37,
        alignSelf: 'stretch',
    }
})

import React，{Component}来自'React'；
从“react native”导入{View、Text、TextInput、样式表、ListView}；
从“时刻”导入*作为时刻；
从“../Components/TodoList”导入TodoList；
从“../models/TodoModel”导入{TodoModel，ITodo}；
操作程序接口{
todo:TodoModel；
三：弦；
}
接口电阻{
数据来源：任何；
myTodo：数组；
}
导出默认类Todo扩展React.Component{
构造器（道具：TodoProps）{
超级（道具）；
const ds=new ListView.DataSource（{rowHasChanged:（r1，r2）=>true}）；
此.state={
数据源：ds，
myTodo:[]
};
}
组件将装入=（）=>{
console.log（this.state.myTodo）；
让数据={
标题：this.props.ter
};
如果（本道具之三）{
this.state.myTodo.push（数据）；
}
这是我的国家({
dataSource:this.state.dataSource.cloneWithRows（this.state.myTodo），
myTodo:this.state.myTodo
});
}
render（）{
返回(
} />
)
}
}

这将查看我从表单中添加的待办事项列表

AddTodo组件

import React, { Component } from 'react';
import { View, Text, TextInput, StyleSheet, ListView } from 'react-native';
import * as moment from 'moment';
import TodoList from '../compoents/TodoList';
import {TodoModel, ITodo} from '../models/TodoModel';

interface TodoProps{
    todo: TodoModel;
    ter:string;
}
interface TodoState{
    dataSource: any;
    myTodo: Array<ITodo>;
}


export default class Todo extends React.Component <TodoProps,TodoState>{

    constructor(props:TodoProps) {
        super(props);

        const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => true});
        this.state = {
            dataSource: ds,
            myTodo: []
        };

    }

    componentWillMount = () => {
        console.log(this.state.myTodo);
        let data = {
            title: this.props.ter
        };

        if (this.props.ter) {
          this.state.myTodo.push(data);
        }

        this.setState({
            dataSource: this.state.dataSource.cloneWithRows(this.state.myTodo),
            myTodo: this.state.myTodo
        });
    }

    render() {

        return (
            <View style={{marginTop: 60}}>
                <ListView enableEmptySections={true} dataSource={this.state.dataSource} renderRow={(rowData) => <TodoList data={rowData} /> } />
            </View>
        )
    }
}

import * as React from "react";
import { Alert, View, Text, StyleSheet, TextInput, TouchableOpacity } from 'react-native';
import {TodoModel} from '../models/TodoModel';
import { Actions} from 'react-native-router-flux';
interface TodoState{
    todoText?: string;
}
interface TodoProps{
    text: string;
}
export default class AddTodo extends React.Component <TodoProps,TodoState> {

    constructor(props:TodoProps){
        super(props);
        this.state = {
            todoText:" "
        };
    }

    handleSubmit = () => {

        Actions.todo({ter: this.state.todoText});
    }

    render() {
        return (
            <View style={{margin: 128, marginLeft: 15, marginRight:15}}>
                <Text>ADD</Text>
                <TextInput autoCorrect={false} style={styles.input} placeholder='Todo' onChangeText={(text) => this.setState({todoText:text})} value={this.state.todoText} />
                <TouchableOpacity onPress={this.handleSubmit.bind(this)}>
                    <Text style={styles.button}>Submit</Text>
                </TouchableOpacity>
            </View>
        )
    }
}


const styles = StyleSheet.create({
    button: {
        backgroundColor: '#ccc',
        color: 'white',
        height: 40,
        lineHeight: 30,
        marginTop: 10,
        textAlign: 'center',
        alignSelf: 'stretch',
        borderRadius: 5,
        justifyContent: 'center',
        alignItems: 'center',
    },
    container: {

    },
    input: {
        borderColor: '#ededed',
        borderRadius: 5,
        borderWidth: 1,
        height: 37,
        alignSelf: 'stretch',
    }
})

import*as React from“React”；
从“react native”导入{Alert，View，Text，StyleSheet，TextInput，TouchableOpacity}；
从“../models/TodoModel”导入{TodoModel}；
从“react native router flux”导入{Actions}；
接口电阻{
todoText？：字符串；
}
操作程序接口{
文本：字符串；
}
导出默认类AddTodo扩展React.Component{
构造器（道具：TodoProps）{
超级（道具）；
此.state={
todoText:“
};
}
handleSubmit=（）=>{
Actions.todo（{ter:this.state.todoText}）；
}
render（）{
返回(
添加
this.setState（{todoText:text}）值={this.state.todoText}/>
提交
)
}
}
const styles=StyleSheet.create({
按钮：{
背景颜色：“#ccc”，
颜色：'白色'，
身高：40，
线高：30，
玛金托普：10，
textAlign:'中心'，
自我定位：“拉伸”，
边界半径：5，
为内容辩护：“中心”，
对齐项目：“居中”，
},
容器：{
},
输入：{
边框颜色：“#ededed”，
边界半径：5，
边框宽度：1，
身高：37，
自我定位：“拉伸”，
}
})

这里的问题。当我添加一个待办事项时。我已成功添加到myTodo数组，但当我添加第二个todo时。它删除第一个todo，并显示第二个todo。它不会推送并添加到数组中。为什么会这样？但是如果你有关于如何做的教程。为它学习会更棒。我对学习英语很感兴趣

更新

export default class App extends React.Component<Props, State> {
    render() {
        return (
            <Router>
                <Scene key="root">
                        <Scene key="todo" component={Todo} title="Todo" initial={true}  onRight={() => Actions.addTodo({text: 'Hello World!'})}
                               rightTitle="Add"/>
                        <Scene key="addTodo" component={AddTodo} title="Add Todo" backTitle="Cancel" />
                </Scene>
            </Router>
        );
    }
}

导出默认类App扩展React.Component{
render（）{
返回(
Actions.addTodo（{text:'Hello World！'}）
rightTitle=“添加”/>
);
}
}

让我们试试我的代码，希望它能帮助你。 您的“推送”将直接改变状态，这可能导致容易出错的代码，即使您在之后再次“重置”状态

您可以在此处找到更多信息：

编辑：

• 重写handleSubmit函数

handleSubmit=（）=>{
Actions.pop（{刷新：
{ter:this.state.todoText}
});
}

您可以看到我对一个非常类似问题的回答：

因此，事实上，在您的情况下，您可以简单地执行以下操作：

const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => true});

export default class Todo extends React.Component <TodoProps,TodoState>{

    constructor(props:TodoProps) {
        super(props);   
        this.state = {
            dataSource: ds.cloneWithRows([]), // or put your initial data here
            myTodo: []
        };
    }

还有一件事，对于组件生命周期中react的默认函数，它们是自动绑定的，所以不需要使用

componentWillMount=（）=>{}

，只需使用

componentWillMount（）

---

这正是你应该做的，如果错误仍然发生，请在这里显示，然后我们可以一起解决它们，谢谢

我很确定你在做动作时。场景（道具）场景会重置。所以当您执行

Actions.todo（{ter:this.state.todoText}）时

在AddTodo中，您基本上重置了todolist，并将新文本作为道具传递（即，您从未保存或传递旧数据，因此它就消失了）。为了解决这个问题，我建议您重新设计addTodo以将所有数据存储在一个数组中，或者找到一种方法将以前的数据作为道具传递，以便addTodo可以附加新数据并将其传递回？我明白了。将数组传递给数组。我会继续做这件事的，谢谢你，我也有同样的问题。我认为，当它提交后导航到主组件时，构造函数将启动并执行myTodo以重置阵列。实际上，您是否可以确保扩展的“React.component works fine”^^？只是“扩展反应组件”怎么样？是的，它工作得很好。我正在考虑另一种方法来删除构造函数中的代码，这样它就不会再次启动。@user3818576我已经编辑了我的答案，希望它能帮助您：D问题是您创建了一个具有新初始状态的新场景。谢谢。它正在工作。但是我不知道为什么要使用Actions.pop和componentWillReceiveProps（）函数。你有关于activity.pop和componentWillReceiveProps的文档链接吗？我试图在谷歌上搜索，但我找不到这方面的可靠信息。谢谢anyway@user3818576使用Actions.yourSceneKey（）时，将向场景堆栈添加更多场景。例如：Todo->AddToDo->（新）Todo。（新）待办事项场景没有您的待办事项场景状态。因此，正确的堆栈