Question

我有带有自定义方法的自定义列表。尝试更改列表并调用setState不会触发组件更新

import React, {useState} from "react";

class MyCustomArray extends Array {
    push(item) {
        super.push(item);
        return this;
    }
}

export default () => {
    const [items, setItems] = useState(new MyCustomArray());
    console.log(items)
    return (
        <div>
            {items.length}
            <button onClick={() => setItems(items.push(1))}/>
        </div>
    );
}

我已经尝试过使用类组件而不是函数使用相同的方法，并且可以正常工作。

import React, {Component} from "react";

class MyCustomArray extends Array {
    push(item) {
        super.push(item);
        return this;
    }
}

export default class App extends Component {
    constructor(props) {
        super(props);
        this.state = {items: new MyCustomArray()};
    }

    render() {
        const {items} = this.state;
        return (
            <div>
                {items.length}
                <button onClick={() => this.setState({items: items.push(1)})}/>
            </div>
        );
    }
}

Answer 1

您需要一个新的items数组实例，使用the spread syntax，

import React, { useState } from "react";

class MyCustomArray extends Array {
  push(item) {
    super.push(item);
    return this;
  }
}

export default () => {
  const [items, setItems] = useState(new MyCustomArray());

  return (
    <div>
      {items.length}
      <button onClick={() => setItems([...items, 1])} />
      //                              ^^^^^^^^^^^^^
    </div>
  );
};

如果要使用class组件，则同样：

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = { items: new MyCustomArray() };
  }

  updateItems = (item) => {
    this.setState(prevState => ({
      ...prevState,
      items: [...prevState.items, item]
    }));
  }

  render() {
    const { items } = this.state;
    return (
      <div>
        {items.length}
        <button onClick={() => this.updateItems(1)} />
      </div>
    );
  }
}

为什么反应不触发组件更新？

1 个答案: