0

我正在寻找在一个对象（Counter下面的实例）上创建一个代理，该代理在更改时将导致数组的所有函数callbacks被触发（该数组将使用来自计数器实例的数据从任何 React 组件callbacks填充.. () => this.setState(). 这样，将触发重新渲染并反映新数据）。一个约束是对象只能从其自身内部进行操作（实例方法increment和decrement）。另一个限制是callbacks即使在初始化对象和代理之后（然后在调用实例方法时触发），数组也需要可编辑。我正在尝试使用这种技术根据计数器类的活动重新渲染 React 组件。这是我目前的尝试（增加或减少时不会重新渲染）。非常感谢您花时间阅读本文，我非常感谢您的任何建议或建议！

import React, { Component } from 'react'

class Counter {

  count = 0

  increment = () => this.count++

  decrement = () => this.count--

}

const counter = new Counter()

const callbacks = []

const validator = {

  // recursively creates callback for any object change...
  // not only for top-level properties

  get(target, key) {
    return (
      typeof target[key] === 'object' &&
      target[key] !== null
    )
      ? new Proxy(target[key], validator)
      : target[key]
  },

  set() {
    callbacks.forEach((update) => update())
    return true
  },

}

const proxy = new Proxy({}, validator)

Object.assign(proxy, counter)

class CounterComponent extends Component {

  counter = {}

  constructor() {
    super()
    this.counter = counter
    callbacks.push(() => {
      this.setState({})
    })
  }

  render() {
    return (
      <div>
        <button
          children='-'
          onClick={ this.counter.decrement }
        />
        <span children={ this.counter.state.count } />
        <button
          children='+'
          onClick={ this.counter.increment }
        />
      </div>
    )
  }

}
4

0 回答 0