Question

我只是想用Javascript向地图（如字典）添加项目。我正在使用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：未定义不是对象（正在评估'this.state.statelist'）

有什么想法吗？

Answer 1

第二个错误是由于代码错误导致的：

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

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

关于警报，您无法对其进行字符串化。其数据在原型中。地图是可迭代的。你可以做：

alert(plist.size);
or
alert(plist.get('2'));

Answer 2

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

Answer 3

感谢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背景的我们来说，这似乎违反直觉。无论哪种方式，我现在都知道不要这样做，并且可以解决它。如果有人有一个很好的解释，我全神贯注。无论如何，我现在都不会被困住！

无法将项目添加到JS地图

3 个答案: