javascript - 为什么 react 不触发组件更新？

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

你需要一个新的项目数组实例，使用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>
    );
  }
}