Question

我目前正试图了解如何在React中实现典型的数据结构。以队列为例，根据我的理解，如果我用Java创建它，我可以用这种Javascript翻译格式定义函数：

class Main extends Component {

  constructor(props) {
    this.state = {queue: new Queue()};
  }

  render() {
    console.log(this.state.queue); 
    //displays the queue with its listed functions properly

    this.state.queue(new Date());
    //ERROR: 'cannot read property "slice" of undefined'
  }
}

并在main（）方法中访问它。但是，在这种情况下，我将使用父组件，其示例如下所示：

console.log(event);

所以我可以弄清楚 Main 类从 Queue 类中访问函数 queue（）的明显情况，但是< strong> 绑定到 Main 类而不是 Queue 类。

所以我的问题是：使用ES6箭头语法，如何维护 Main 类中使用的 this 绑定到队列的子实例调用方法的 Main 类？

换句话说，我如何确保被访问的 this.state.arr 变量是指存储在队列实例中的 arr 在 Main 类的状态中队列而不是未声明的 arr ？

如果这是一个重复的问题，我提前道歉，但搜索没有得到任何答案，所以你的帮助将不胜感激。

编辑：正如Sidney在下面指出的那样，我犯了一个愚蠢的错误，并在 Queue 组件中省略了我的状态中的 arr 。遗憾！

Answer 1

您实际获得的错误与this绑定无关，如果您在React之外使用Queue类，则会发生错误。

＆＃13;

class Queue {
  constructor(props) {
    this.state = {message: "Test"}
  }

  queue(el) {
    let arr = this.state.arr.slice();
    arr.push(el);
    return arr;
  }

  dequeue = (el) => {
    let arr = this.state.arr.slice(1, this.state.arr.length);
    return arr;
  }

  next = () => {
    let arr = this.state.arr.slice();
    return arr[1];
  }

  last = () => {
    let arr = this.state.arr.slice();
    return arr[arr.length - 1];
  }
}

const ticketLine = new Queue()
ticketLine.queue('Bob')
ticketLine.queue('Sarah')

＆＃13;

（请注意extends Component和super()已被删除）

错误发生在queue()的第一行，您尝试访问this.state.arr，但您从未对其进行过定义。因此，在undefined上调用.slice()会引发错误。

在React中实现子数据结构

1 个答案: