反應可重用狀態修改方法或組件

Question

我的應用程序中有2個儀表板，一個用於設備，另一個用於桌面。 他們兩個都需要一種可以修改狀態的方法。 並且此方法包含條件語句，該條件語句確定狀態下要更新的值。 對於我的情況，桌面和設備儀表板都可以絕對使用此方法來更改所需的狀態。 現在，要實現這一點，我所了解的是，我必須將此方法放在有狀態的組件DesktopDashboard和DeviceDashboard中，從而使我的代碼變得多余。 我無法確定可以從這兩個組件中拉出這種特定狀態修改方法並將其從一個地方用作通用方法的方式。 下面是我的代碼：

webDashboard組件

import React, { Fragment, Component } from 'react';
import JourneyList from './JourneyList';
import CONSTANTS from './Constants';
class webDashboard extends Component {
    constructor(props) {
        super(props);

        this.state = {
            journeyMessageList: [{ messageId: XYPZ, type: CONSTANTS.TEXT, author: CONSTANTS.SYSTEM, data: { text: MESSAGE_CONSTANTS.HOW_MAY_I_HELP_YOU }, time: new Date()},
            { messageId: XYPZ, type: CONSTANTS.ENQUIRY_OPTIONS, author: CONSTANTS.SYSTEM, data: MESSAGE_CONSTANTS.ENQUIRY_OPTIONS, time: new Date()} ]
        };

    }

    updateMyState = (source, typedText) => {
     this.setState({
            journeyMessageList: [...this.state.journeyMessageList, 
                    { messageId: XXXX, type: CONSTANTS.TEXT, author: CONSTANTS.ME, data: { text: typedText }, time: new Date()},
                ]
        });
        if(CONSTANTS.SOURCE_USER_INPUT.MDN === source) {

            this.setState({
                journeyMessageList: [...this.state.journeyMessageList.filter((ele) => ele.type !== CONSTANTS.MDN_USER_INPUT),
                    { messageId: 'dfsdf', type: CONSTANTS.TEXT, author: CONSTANTS.ME, data: { text: typedText }, time: new Date()},
                    { messageId: 'dfsdf', type: CONSTANTS.TEXT, author: CONSTANTS.SYSTEM, data: { text: MESSAGE_CONSTANTS.ASK_SSS }, time: new Date()},
                    { messageId: 'dfsdf', type: CONSTANTS.SSS_USER_INPUT, data: { text: "INPUTBOX" }, author: CONSTANTS.SYSTEM, time: new Date()}
                ]  
            });
        } else if(CONSTANTS.SOURCE_USER_INPUT.NRIC === source) {
            this.setState({
                journeyMessageList: [...this.state.journeyMessageList.filter((ele) => ele.type !== CONSTANTS.NRIC_USER_INPUT),
                    { messageId: 'ghfgh', type: CONSTANTS.TEXT, author: CONSTANTS.ME, data: { text: typedText }, time: new Date()},
                    { messageId: 'ghfgh', type: CONSTANTS.TEXT, author: CONSTANTS.SYSTEM, data: { text: MESSAGE_CONSTANTS.ELIGIBLE_FOR_SERVICE }, time: new Date()},
                    { messageId: 'ghfgh', type: CONSTANTS.CONFIRM_CURRENT_DEVICE, author: CONSTANTS.SYSTEM, data: MESSAGE_CONSTANTS.CONFIRM_CURRENT_DEVICE, time: new Date()}
                ]
            });
        }elsee if(Many Such Conditions){
            .....
        }elsee if(Many Such Conditions){
            .....
        }elsee if(Many Such Conditions){
            .....
        }else{
            .....
        }
    }

    render() {
        return (
            <Fragment> <JourneyList messages={this.state.journeyMessageList} 
                    updateJourneyList={this.updateMyState} />
            </Fragment>
        );
    }

};

export default webDashboard;

deviceDashboard組件

import React, { Fragment, Component } from 'react';
import DeviceChatWindow from './DeviceChatWindow';
import CONSTANTS from './Constants';
class deviceDashboard extends Component {
    constructor(props) {
        super(props);

        this.state = {
            journeyMessageList: [{ messageId: XYPZ, type: CONSTANTS.TEXT, author: CONSTANTS.SYSTEM, data: { text: MESSAGE_CONSTANTS.HOW_MAY_I_HELP_YOU }, time: new Date()},
            { messageId: XYPZ, type: CONSTANTS.ENQUIRY_OPTIONS, author: CONSTANTS.SYSTEM, data: MESSAGE_CONSTANTS.ENQUIRY_OPTIONS, time: new Date()} ]
        };

    }

    updateMyState = (source, typedText) => {
     this.setState({
            journeyMessageList: [...this.state.journeyMessageList, 
                    { messageId: XXXX, type: CONSTANTS.TEXT, author: CONSTANTS.ME, data: { text: typedText }, time: new Date()},
                ]
        });
        if(CONSTANTS.SOURCE_USER_INPUT.MDN === source) {

            this.setState({
                journeyMessageList: [...this.state.journeyMessageList.filter((ele) => ele.type !== CONSTANTS.MDN_USER_INPUT),
                    { messageId: 'dfsdf', type: CONSTANTS.TEXT, author: CONSTANTS.ME, data: { text: typedText }, time: new Date()},
                    { messageId: 'dfsdf', type: CONSTANTS.TEXT, author: CONSTANTS.SYSTEM, data: { text: MESSAGE_CONSTANTS.ASK_SSS }, time: new Date()},
                    { messageId: 'dfsdf', type: CONSTANTS.SSS_USER_INPUT, data: { text: "INPUTBOX" }, author: CONSTANTS.SYSTEM, time: new Date()}
                ]  
            });
        } else if(CONSTANTS.SOURCE_USER_INPUT.NRIC === source) {
            this.setState({
                journeyMessageList: [...this.state.journeyMessageList.filter((ele) => ele.type !== CONSTANTS.NRIC_USER_INPUT),
                    { messageId: 'ghfgh', type: CONSTANTS.TEXT, author: CONSTANTS.ME, data: { text: typedText }, time: new Date()},
                    { messageId: 'ghfgh', type: CONSTANTS.TEXT, author: CONSTANTS.SYSTEM, data: { text: MESSAGE_CONSTANTS.ELIGIBLE_FOR_SERVICE }, time: new Date()},
                    { messageId: 'ghfgh', type: CONSTANTS.CONFIRM_CURRENT_DEVICE, author: CONSTANTS.SYSTEM, data: MESSAGE_CONSTANTS.CONFIRM_CURRENT_DEVICE, time: new Date()}
                ]
            });
        }elsee if(Many Such Conditions){
            .....
        }elsee if(Many Such Conditions){
            .....
        }elsee if(Many Such Conditions){
            .....
        }else{
            .....
        }
    }

    render() {
        return (
            <Fragment>  <div id="appBody" className="row app-body">
                    <div id="chatWindow" className="col-md-9 app-message-window">
                        <DeviceChatWindow
                            journeyMessageList={this.state.journeyMessageList}
                            updateJourneyList={this.updateMyState}
                        />
                    </div>

                </div>
            </Fragment>
        );
    }

};

export default deviceDashboard;

在這里，方法updateMyState是我要用作可重用的方法，以避免冗余，但是我無法弄清楚如何在公共位置使用它，以便無論何時調用/重發組件調用，它都可以更改狀態。為了它。

注意：constants.jsx包含簡單的鍵/值對常量，例如：

const CONSTANTS = {
  TEXT:"Hi There",
ME:"me",
...
...
}

Answer 1

setState()還接受一個傳遞state和props作為參數的函數，並應返回新狀態。 您可以將更新邏輯提取到靜態函數中，例如：

// in myModule.js

const updateState = (state, props) => {
    // calculate new state
    // const newState = ...

    return newState;
}

然后像這樣使用它：

import updateState from 'myModule';

class MyComponent extends Component {

    updateMyState = () => this.setState(updateState);

    render() {
        return (
            <JourneyList messages={this.state.journeyMessageList} 
                updateJourneyList={this.updateMyState} />
        );
    }
}

當然，您也可以向該函數添加任意參數：

const updateState = (state, props, source, typedText) => {/* calculate new state */}

用法：

import updateState from 'myModule';

class MyComponent extends Component {

    updateMyState = (source, typedText) => this.setState(
        (state, props) => updateState(state, props, source, typedText)
    );

    render() {
        return (
            <JourneyList messages={this.state.journeyMessageList} 
                updateJourneyList={this.updateMyState} />
        );
    }
}