Question

我希望能够将从MapStateToProps函数获得的数据用于我的组件。

我的目标：

使用我从userData获得的数据，请参阅下面发布的图片。
使用mapStatetoProps函数我想让它成为我可以调用并用于输入组件的道具。
我是反应原生和redux的初学者，所以请耐心等待我。

import React, { Component } from 'react';
import { View, Text, Picker, Image, StyleSheet } from 'react-native';
import {Actions} from 'react-native-router-flux';
import * as actions from '../actions';
import {
  Drawer,
  Container,
  Content,
  Item,
  Input,
  H3,
  Form,
  Label,
  Thumbnail
 } from 'native-base';
import {Button} from 'react-native-elements';
import AppHeader from './AppHeader';
import Sidebar from './Sidebar';
import { connect } from 'react-redux';

class ProfileScreen extends Component {

  state = { language: 'english' };

  closeDrawer = () => {
    this.drawer._root.close()
  };

  openDrawer = () => {
    this.drawer._root.open()
  };
  render(){

    return (
    <Container>
      <Drawer
        ref={(ref) => { this.drawer = ref; }}
        content={<Sidebar/>}
        onClose={() => this.closeDrawer()}
        side={'right'}>
        <AppHeader
            title='Profle'
            openDrawer={this.openDrawer.bind(this)}
        />
        <Content>
            <H3 style={{ marginTop: 20, marginLeft: 10 }}>Edit Profile</H3>
            <Image
            style={styles.thumbStyle}
            source={require('../assets/thumb.png')}
             />
            <Form style={{marginTop: 10}}>

              <Item floatingLabel>
                <Label>Name</Label>
                <Input />
              </Item>

              <Item floatingLabel>
                <Label>Birthday</Label>
                <Input />
              </Item>

              <Item floatingLabel>
                <Label>Gender</Label>
                <Input />
              </Item>

              <Item floatingLabel>
                <Label>Province</Label>
                <Input />
              </Item>


              <View  last style={{ justifyContent: 'center',alignItems: 'center', marginTop: 40}}>
                <Button
                backgroundColor='#397af8'
                title='Edit'
                buttonStyle={{ width: 200, borderRadius: 5, borderColor: '#397af8'}}

                large
                />
              </View>

            </Form>
        </Content>
      </Drawer>
     </Container>

    );
  }
}
const drawerStyles = {
  drawer: { shadowColor: '#000000', shadowOpacity: 0.8, shadowRadius: 3},
  main: {paddingLeft: 3},
}

const styles = StyleSheet.create({
  thumbStyle: {
    width: 120,
    height: 120,
    alignSelf: 'center'
  }
});

// const mapStateToProps = state => {
//   return { userData: state.userData  };
//   console.log(state.userData);
// };

function mapStateToProps(state, userData) {
  return {

  };
}

 export default connect (mapStateToProps, actions)(ProfileScreen);

Answer 1

这绝对没问题：

CacheConfiguration<Integer, Integer> cacheConfiguration = new CacheConfiguration<Integer, Integer>("myCache");
cacheConfiguration.setStatisticsEnabled(true);
IgniteCache<Integer, Integer> cache = ignite.getOrCreateCache(cacheConfiguration, nearCfg);

视图中的用法：eventHandler(idx, val) { var newState = {} newState[idx] = val; this.setState(newState); }

您还可以在mapStateToProps中执行一些解构：

<View style={{ marginBottom: 20 }}>
       {
         this.props.addresses.map(addr, idx => {
          return (
            <View style={{ marginRight: 10 }} key={addr.label}>
              <View>
                <Text style={styles.labelTextStyle}>{addr.label}</Text>
                <Button onPress={this.eventHandler.bind(this, idx, addr.label}><Button>
              </View>
            </View>
          );
        })
      }
</View>

写入时间较短，但使用情况不会改变。

Answer 2

只需在您的组件中使用this.props.userData

Answer 3

两个都是正确的

const mapStateToProps = (state) => {
   return { userData: state.userData  };
};

const mapStateToProps = ({ userData }) => {
    return { userData };
};

但是，如果您想改善它，那就有可能！您也可以这样做：

const mapStateToProps = ({ userData }) => ({
    userData,
});

如何使用MapStatetoProps函数中的数据到组件

3 个答案: