Reactjs （Native React）无法使计数器在Native React中分别为两个项目工作

我试图让我的计数器分别为我的两个项目工作，但每次我触摸1个项目上的增加按钮，这两个项目都会增加 这就是应用程序的外观

CounterApp.js文件///////////////////////////////////////////////////////////////////////////

import {Image} from 'react-native';
import React, { Component } from "react";
import {
    View,
    Text,
    StyleSheet,
    TouchableOpacity
} from "react-native";
import { connect } from 'react-redux'
class CounterApp extends Component {


    render() {
        return (
            <View style={styles.container}>
                <View style={{ flexDirection: 'row', width: 200, justifyContent: 'space-around' }}>
                    <TouchableOpacity onPress={() => this.props.increaseCounter()}>
                        <Text style={{ fontSize: 20 }}>Increase</Text>
                    </TouchableOpacity>
                    <Text style={{ fontSize: 20 }}>{this.props.counter}</Text>
                    <TouchableOpacity onPress={() => this.props.decreaseCounter()}>
                        <Text style={{ fontSize: 20 }}>Decrease</Text>
                    </TouchableOpacity>
                </View>

                <Image source={{uri: 'https://facebook.github.io/react/logo-og.png'}}
       style={{width: 200, height: 200}} />

<View style={{ flexDirection: 'row', width: 200, justifyContent: 'space-around' }}>
                    <TouchableOpacity onPress={() => this.props.increaseCounter2()}>
                        <Text style={{ fontSize: 20 }}>Increase</Text>
                    </TouchableOpacity>
                    <Text style={{ fontSize: 20 }}>{this.props.counter}</Text>
                    <TouchableOpacity onPress={() => this.props.decreaseCounter2()}>
                        <Text style={{ fontSize: 20 }}>Decrease</Text>
                    </TouchableOpacity>
                </View>

                <Image source={{uri: 'https://facebook.github.io/react/logo-og.png'}}
       style={{width: 200, height: 200}} />
            </View>
        );
    }
}

function mapStateToProps(state) {
    return {
        counter: state.counter,

    }
}

function mapDispatchToProps(dispatch) {
    return {
        increaseCounter: () => dispatch({ type: 'INCREASE_COUNTER' }),
        decreaseCounter: () => dispatch({ type: 'DECREASE_COUNTER' }),
        increaseCounter2: () => dispatch({ type: 'INCREASE_COUNTER' }),
        decreaseCounter2: () => dispatch({ type: 'DECREASE_COUNTER' }),

    }
}







export default connect(mapStateToProps, mapDispatchToProps )(CounterApp)


const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center'
    }
});

import {Image} from 'react-native';
import React, { Component } from "react";
import {
    View,
    Text,
    StyleSheet,
    TouchableOpacity
} from "react-native";
import { createStore } from 'redux'
import CounterApp from './src/CounterApp'
import { Provider } from 'react-redux'
/**
 * Store - holds our state - THERE IS ONLY ONE STATE 
 * Action - State can be modified using actions - SIMPLE OBJECTS 
 * Dispatcher - Action needs to be sent by someone - known as dispatching an action
 * Reducer - receives the action and modifies the state to give us a new state 
 *  - pure functions 
 *  - only mandatory argument is the 'type' 
 * Subscriber - listens for state change to update the ui  
 */
const initialState = {
    counter: 0
}
const reducer = (state = initialState, action) => {
    switch (action.type) {
        case 'INCREASE_COUNTER':
            return { counter: state.counter + 1 }
        case 'DECREASE_COUNTER':
            return { counter: state.counter - 1 }
    }
    return state
}

const store = createStore(reducer)

class App extends Component {

    render() {




      return (





           <Provider store={store}>
                <CounterApp />

            </Provider>


        );
    }
}

export default App

// export default App;

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center'
    }
});

从'react native'导入{Image}；
从“React”导入React，{Component}；
进口{
看法
文本，
样式表，
可触摸不透明度
}从“反应本族语”；
从“react redux”导入{connect}
类CounterApp扩展组件{
render（）{
返回(
this.props.increaseCounter（）}>
增加
{this.props.counter}
this.props.decreaseCounter（）}>
减少
this.props.increaseCounter2（）}>
增加
{this.props.counter}
this.props.decreaseCounter2（）}>
减少
);
}
}
函数MapStateTops（状态）{
返回{
计数器：state.counter，
}
}
功能图DispatchToprops（调度）{
返回{
increaseCounter:（）=>分派（{type:'INCREASE_COUNTER'}），
decreaseCounter:（）=>分派（{type:'DECREASE_COUNTER'}），
increaseCounter2:（）=>分派（{type:'INCREASE_COUNTER'}），
DecreaseCounter 2:（）=>分派（{type:'DECREASE_COUNTER'}），
}
}
导出默认连接（mapStateToProps、mapDispatchToProps）（CounterApp）
const styles=StyleSheet.create({
容器：{
弹性：1，
对齐项目：“居中”，
为内容辩护：“中心”
}
});

app.js文件//////////////////////////////////////////////////////////////////////

import {Image} from 'react-native';
import React, { Component } from "react";
import {
    View,
    Text,
    StyleSheet,
    TouchableOpacity
} from "react-native";
import { connect } from 'react-redux'
class CounterApp extends Component {


    render() {
        return (
            <View style={styles.container}>
                <View style={{ flexDirection: 'row', width: 200, justifyContent: 'space-around' }}>
                    <TouchableOpacity onPress={() => this.props.increaseCounter()}>
                        <Text style={{ fontSize: 20 }}>Increase</Text>
                    </TouchableOpacity>
                    <Text style={{ fontSize: 20 }}>{this.props.counter}</Text>
                    <TouchableOpacity onPress={() => this.props.decreaseCounter()}>
                        <Text style={{ fontSize: 20 }}>Decrease</Text>
                    </TouchableOpacity>
                </View>

                <Image source={{uri: 'https://facebook.github.io/react/logo-og.png'}}
       style={{width: 200, height: 200}} />

<View style={{ flexDirection: 'row', width: 200, justifyContent: 'space-around' }}>
                    <TouchableOpacity onPress={() => this.props.increaseCounter2()}>
                        <Text style={{ fontSize: 20 }}>Increase</Text>
                    </TouchableOpacity>
                    <Text style={{ fontSize: 20 }}>{this.props.counter}</Text>
                    <TouchableOpacity onPress={() => this.props.decreaseCounter2()}>
                        <Text style={{ fontSize: 20 }}>Decrease</Text>
                    </TouchableOpacity>
                </View>

                <Image source={{uri: 'https://facebook.github.io/react/logo-og.png'}}
       style={{width: 200, height: 200}} />
            </View>
        );
    }
}

function mapStateToProps(state) {
    return {
        counter: state.counter,

    }
}

function mapDispatchToProps(dispatch) {
    return {
        increaseCounter: () => dispatch({ type: 'INCREASE_COUNTER' }),
        decreaseCounter: () => dispatch({ type: 'DECREASE_COUNTER' }),
        increaseCounter2: () => dispatch({ type: 'INCREASE_COUNTER' }),
        decreaseCounter2: () => dispatch({ type: 'DECREASE_COUNTER' }),

    }
}







export default connect(mapStateToProps, mapDispatchToProps )(CounterApp)


const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center'
    }
});

import {Image} from 'react-native';
import React, { Component } from "react";
import {
    View,
    Text,
    StyleSheet,
    TouchableOpacity
} from "react-native";
import { createStore } from 'redux'
import CounterApp from './src/CounterApp'
import { Provider } from 'react-redux'
/**
 * Store - holds our state - THERE IS ONLY ONE STATE 
 * Action - State can be modified using actions - SIMPLE OBJECTS 
 * Dispatcher - Action needs to be sent by someone - known as dispatching an action
 * Reducer - receives the action and modifies the state to give us a new state 
 *  - pure functions 
 *  - only mandatory argument is the 'type' 
 * Subscriber - listens for state change to update the ui  
 */
const initialState = {
    counter: 0
}
const reducer = (state = initialState, action) => {
    switch (action.type) {
        case 'INCREASE_COUNTER':
            return { counter: state.counter + 1 }
        case 'DECREASE_COUNTER':
            return { counter: state.counter - 1 }
    }
    return state
}

const store = createStore(reducer)

class App extends Component {

    render() {




      return (





           <Provider store={store}>
                <CounterApp />

            </Provider>


        );
    }
}

export default App

// export default App;

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center'
    }
});

从'react native'导入{Image}；
从“React”导入React，{Component}；
进口{
看法
文本，
样式表，
可触摸不透明度
}从“反应本族语”；
从“redux”导入{createStore}
从“./src/CounterApp”导入CounterApp
从“react redux”导入{Provider}
/**
*商店-保存我们的状态-只有一个状态
*可以使用actions-SIMPLE对象修改Action-State
*Dispatcher—操作需要由某人发送—称为调度操作
*Reducer-接收操作并修改状态以提供新状态
*-纯函数
*-只有强制参数是“类型”
*订户-侦听状态更改以更新ui
*/
常量初始状态={
柜台:0
}
const reducer=（state=initialState，action）=>{
开关（动作类型）{
“增加计数器”案例：
返回{counter:state.counter+1}
“减少计数器”案例：
返回{counter:state.counter-1}
}
返回状态
}
const store=createStore（reducer）
类应用程序扩展组件{
render（）{
返回(
);
}
}
导出默认应用程序
//导出默认应用程序；
const styles=StyleSheet.create({
容器：{
弹性：1，
对齐项目：“居中”，
为内容辩护：“中心”
}
});

它们都是从同一道具源映射而来的

而不是：

increaseCounter: () => dispatch({ type: 'INCREASE_COUNTER' }),
decreaseCounter: () => dispatch({ type: 'DECREASE_COUNTER' }),
increaseCounter2: () => dispatch({ type: 'INCREASE_COUNTER' }),
decreaseCounter2: () => dispatch({ type: 'DECREASE_COUNTER' }),

您应该具有以下结构：

increaseCounter: () => dispatch({ type: 'INCREASE_COUNTER' }),
decreaseCounter: () => dispatch({ type: 'DECREASE_COUNTER' }),
increaseCounter2: () => dispatch({ type: 'INCREASE_COUNTER2' }),
decreaseCounter2: () => dispatch({ type: 'DECREASE_COUNTER2' }),

下一个更改是：

const reducer = (state = initialState, action) => {
switch (action.type) {
    case 'INCREASE_COUNTER':
        return { counter: state.counter1 + 1 }
    case 'DECREASE_COUNTER':
        return { counter: state.counter1 - 1 }
    case 'DECREASE_COUNTER2':
        return { counter: state.counter2 + 1 }
    case 'INCREASE_COUNTER2':
        return { counter: state.counter2 - 1 }
}
return state
}

下一步：

const initialState = {
    counter1: 0,
    counter2: 0,
}

接下来，为每个计数器指定特定道具：

return {
        counter1: state.counter1,
        counter2: state.counter2,
}


<Text style={{ fontSize: 20 }}>{this.props.counter1}</Text>
<Text style={{ fontSize: 20 }}>{this.props.counter2}</Text>

返回{
counter1:state.counter1，
counter2:state.counter2，
}
{this.props.counter1}
{this.props.counter2}

数字消失了，这是我的，对不起，我在mapStateToProps编辑了我的代码，将{counter，counter}更改为{counter1，counter2}我按下按钮后会删除数字，这是我的代码，只是检查了代码问题是常数减缩器，注意最后一个，编辑并修复名称，它将修复