开发者问题收集

无法将项目添加到 JS 地图

2020-03-26
88
javascript reactjs react-native dictionary

我只是想用 Javascript 将一个项目添加到 Map（如字典）中。我使用的是 React Native。 

import React, { Component } from 'react';

import {
  AppRegistry,
  View,
  Button,
} from 'react-native';

export class Stack extends Component {
  constructor(props){
    super(props)
    this.state = {
      statelist: new Map(),
    }
  }

  add_func_list() {
    let plist = new Map()
    plist.set(1, 'ddd');
    alert(JSON.stringify(plist))   
  }

  add_state_list(){
    let statelist = this.state.statelist
    statelist.set(2, 'ggg');
    this.setState({statelist})
  }

  render() {
      return (
          <View>
              <Button title="add to func list" onPress={this.add_func_list} />
              <Button title="add to state list" onPress={this.add_state_list} />
          </View>
      );
  }
}

export default function App(props) {
  return (
      <Stack />
  );
};

AppRegistry.registerComponent('default', () => App);

如果按下第一个按钮，我会将其添加到函数中的局部变量中。没有添加任何内容，会显示警报 {

第二个按钮应该添加到状态变量中，但我收到错误：“TypeError：undefined 不是对象（评估‘this.state.statelist’）”

有什么想法吗？

3个回答

第二个错误是由于代码错误： 

onPress={this.add_state_list.bind(this)}

或将方法转换为箭头函数。

关于警报，您无法对其进行字符串化。其数据在原型中。 Map 是可迭代的。 您可以执行以下操作： 

alert(plist.size);
or
alert(plist.get('2'));
Mukesh Chandra
2020-03-26
  add_func_list() {
    let plist = new Map()
    plist.set(1, 'ddd');
    alert(JSON.stringify(plist.get(1))   
  }
Vivek Yadav
2020-03-26

感谢 Mukesh 和 Vivek。我是 RN 新手，所以我不知道打印地图的限制。我的构造函数中实际上有一个方法绑定，但未能将其复制到示例中。不幸的是，结果是它产生了与我的真实系统中相同的错误，我被愚弄了。无论如何，您回答了我提出的问题，对此我深表感谢。 事实证明，真正的问题是继承的结果，正如我现在所学习的，状态继承不像其他继承那样工作。 

import React, { Component } from 'react';

import {
  AppRegistry,
  Button,
  View,
} from 'react-native';


export class Stack extends Component {
  constructor(props){
    super(props)
    this.state = {
      statelist: new Map(),  // get's overwritten and destroyed by child state assgnment
    }
    //this.statelist = new Map(),  <-- this way it works fine if child sets state
    this.add_state_list = this.add_state_list.bind(this)
  }

  add_state_list(){
    this.statelist.set(2, 'ggg');
    alert(JSON.stringify(this.statelist.get(2)))   
  }
}


export class StackHandler extends Stack {
  constructor(props){
    super(props)
    // if I remove this.state assignment below, it works
    this.state = {
      count:0  // destroys parent's state
    };
  }

  render() {
      return (
          <View>
              <Button title="add to state list" onPress={this.add_state_list} />
          </View>
      );      
  }
}

export default function App(props) {
  return (
     <StackHandler/>
  );
};

AppRegistry.registerComponent('default', () => App);

此代码更符合我的问题。类 StackHandler 和类 Stack 都有状态变量。Stackhandler 继承 Stack。当 Stackhandler 设置其状态变量时，它会破坏其父级的状态。对于我们这些具有 OOP 背景的人来说，这似乎是违反直觉的。无论如何，我现在知道不要这样做，并且可以解决这个问题。如果有人有好的解释，我洗耳恭听。无论如何，我现在摆脱困境了！

Knut
2020-03-27