Proxy {dispatchConfig: {…}, _targetInst: FiberNode, isDefaultPrevented: ƒ...

最新推荐文章于 2024-06-19 20:20:24 发布

hzxOnlineOk

最新推荐文章于 2024-06-19 20:20:24 发布

阅读量576

点赞数

分类专栏： react-native

本文链接：https://blog.csdn.net/hzxOnlineOk/article/details/105074317

版权

react-native 专栏收录该内容

95 篇文章 2 订阅

订阅专栏

父组件传递回调给子组件，返回参数不符合预期

今天在react-native中从父组件传递一个回调函数引用给子组件时，子组件传递给父组件的参数值竟然是（控制台打印输出）：

Proxy {dispatchConfig: {…}, _targetInst: FiberNode, isDefaultPrevented: ƒ, isPropagationStopped: ƒ, _dispatchListeners: ƒ, …}
[[Handler]]:Object
[[Target]]:Class
[[IsRevoked]]:false

而不是我所期待的对象，为什么会这样？下面贴出出问题的代码：
父组件：

const appList = [
  { key: '0', title: '规章制度', icon: require('./img/ic_1.png') },
  {
    key: '1',
    title: '订购常识',
    icon: require('./img/ic_2.png')
  },
  { key: '2', title: '微课堂', icon: require('./img/ic_3.png') },
  { key: '3', title: '在线考试', icon: require('./img/ic_4.png') },
  { key: '4', title: '模板下载', icon: require('./img/ic_3.png') }
];

<NavIcons
          dataList={appList}
          onPress={this.navTo}
          itemsRowStyle={{ marginBottom: OASize(25) }}
/>

navTo(item) {
    console.log('item:', item, arguments);
    switch (item.title) {
      case '规章制度':
        mb.getNavigator().push('PartyRulesScene');
        break;
      case '订购常识':
        mb.getNavigator().push('PartyGeneralScene');
        break;
      case '微课堂':
        mb.getNavigator().push('PartyRulesScene');
        break;
      case '在线考试':
        mb.getNavigator().push('PartyRulesScene');
        break;
      case '模板下载':
        mb.getNavigator().push('PartyRulesScene');
        break;
    }
  }

子组件：

render() {
    const { dataList, onPress, itemsRowStyle } = this.props;
    console.log('dataList:', dataList);
    return (
      <View style={styles.rowStyle}>
        {dataList.map((item, index) => (
          <TouchableOpacity
            key={index}
            style={[styles.appItem, itemsRowStyle]}
            onPress={item => onPress(item)}
          >
            <Image source={item.icon} style={styles.icon} />
            <Text>{item.title}</Text>
          </TouchableOpacity>
        ))}
      </View>
    );
  }

控制台打印输出结果：
在这里插入图片描述