Question

我正在出于学习目的开发一个简单的React JS应用程序。我几天前才刚开始学习React JS。现在，我在Flux Store遇到问题。我需要在同一层次级别的两个子组件之间共享更改事件。

我有一个名为TodoComponent的父组件，具有以下定义

let savedValue = default.value(forKey: "key")

它有两个子组件，分别为ListComponent和AddItemComponent。而且，我有一个具有此定义的商店。

//Create
class TodoComponent extends React.Component{
    constructor(props){
        super(props)

    }


    render(){

        return (
            <div>
                <div>
                <ListComponent />
                </div>
                <AddItemComponent />
            </div>
        )
    }
}

它具有将新项目添加到数组中的功能和获取数组的功能。

这是ListComponent，用于显示DataStore流量存储中的项目数组。

import { EventEmitter } from 'events';

class DataStore extends EventEmitter{

    constructor()
    {
        super();
        this.todos = [
            "Eat",
            "Sleep",
            "Die",
            "Shower"
        ];
    }

    getAll(){
        return this.todos;
    }

    addItem(newItem)
    {
        this.todos.push(newItem);
        this.emit("change")
    }

}

const dataStore = new DataStore;

export default dataStore;

它正在更新DataStore存储的change事件中的项目。但是我没有在ListComponent中调用addItem函数。我在AddItemComponent中调用它。这是AddItemComponent的定义。

import React from 'react';
import TodoItem from './TodoItem';
import DataStore from './data.store';

class ListComponent extends React.Component{
    constructor(props)
    {
        super(props)
        this.state = { todos : DataStore.getAll() };
    }

    componentWillMount(){
        DataStore.on('change', () => {
            //do somethif
            this.state = { todos : DataStore.getAll() };
        })
    }

    render()
    {
        var deleteItem = (item) => {
            this.deleteItem(item);
        }
        var editItem = (item) => {
            this.editItem(item);
        }

        var addItem = (newItem) => {
            this.addItem(newItem);
        }
        var todos = this.state.todos.map((item, index) => {
            return (
                <TodoItem item={item} addItem={addItem.bind(this)} deleteItem={deleteItem} editItem={editItem} />
            )
        });

        return (
            <ul>
                {todos}
            </ul>
        )
    }

    deleteItem(item)
    {
        this.setState({ todos: this.state.todos.filter((listItem, index) => {
            return listItem !== item; 
        }) });
    }

    editItem(item)
    {
        alert(item)
    }

    addItem(newItem)
    {
        DataStore.addItem(newItem);
    }
}

module.exports = ListComponent;

但是当我在AddItemComponent中触发addItem函数时，不会触发ListComponent中的数据存储区的更改事件。因此，如何在同一层次级别上存在的两个组件之间同步Flux Store的更改事件？

我能想到的解决方案是在TodoComponent（父组件）中具有DataStore，并将数据和功能作为道具发送给子组件。我认为，这种方式的代码将变得有些混乱。那是唯一的解决方案吗？

Answer 1

欢迎加入React！我重新创建了您的示例，您的“更改”事件正在ListComponent中触发，但是要更新组件中的状态，您应该使用this.setState(changes)而不是this.state = {changes}。仅在构造函数中使用this.state = {}来设置初始状态。 setState方法在React生命周期中正确流动，并导致组件使用新状态重新渲染。关于React状态和生命周期挂钩here的官方指南。

在相同的层次级别子组件之间共享存储更改事件

1 个答案: