React 将“this”传递给上下文提供者值

Question

我在 class 组件中使用 useContext 。 我用一个按钮创建了一个简单的 react (nextjs) 应用程序，在更新 state 的上下文中调用 function 并因此重新渲染 home 组件。

import { useContext } from "react";
import { UserContext } from "../provider/TestProvider";

export default function Home() {
    let [contex] = useContext(UserContext);

    return (
        <>
            <button onClick={() => contex.addOne()}>Add 1</button>
            {contex.state.count.map((e) => (
                <div key={Math.random()}> {e} </div>
            ))}
        </>
    );
}

import { createContext, Component } from "react";

export const UserContext = createContext();

export default class TestProvider extends Component {
    state = {count: []};

    constructor(props) {
        super(props);
        this.props = props;
    }

    addOne() {
        let oldState = [...this.state.count];
        oldState.push("test");
        this.setState({ count: oldState });
    }

    render() {
        return (
            <UserContext.Provider value={[this]}>
                {this.props.children}
            </UserContext.Provider>
        );
    }
}

注意：它被包装到整个应用程序的提供程序，在_app.js

这工作正常，但是我想知道为什么我不得不在数组（ value={[this]} this中传递它？ 当我试图只传递这个（ value={this} ）[并修改上下文let contex = useContext(UserContext) ] 时，Home function 不再对 state 的更改做出反应，因此不会重新渲染。

根据我对编程的了解，这两个选项的行为应该完全相同。

这里发生了什么？

Answer 1

问题

您只是“被迫”将上下文值作为value={[this]}传递，因为这就是您在消费者中访问它的方式。

let [contex] = useContext(UserContext);

在这里，您使用数组解构赋值从数组中获取上下文值并且可以访问。

contex.state.count

也就是说， this.state.count和contex.state.count是一回事。

更多的是您被迫从数组中使用它，因为它是这样提供的： value={[this]} 。

解决方案

Instead of passing the entire this object of the root parent class component it would be better to pass only what you need to, like only the count state and the addOne callback function.

例子：

export const UserContext = createContext({
  addOne: () => {},
  count: [],
});

export default class TestProvider extends Component {
  state = { count: [] };

  addOne = () => {
    this.setState(prevState => ({
      count: [...prevState.count, "test"];
    }));
  }

  render() {
    const { children } = this.props;
    const { count } = this.state;
    return (
      <UserContext.Provider value={{ addOne, count }}> // provided as object
        {children}
      </UserContext.Provider>
    );
  }
}

...

import { useContext } from "react";
import { UserContext } from "../provider/TestProvider";

export default function Home() {
  const { addOne, count } = useContext(UserContext); // object destructuring assignment

  return (
    <>
      <button onClick={addOne}>Add 1</button>
      {count.map((e) => (
        <div key={e}>{e}</div>
      ))}
    </>
  );
}

不过，这里的主要内容应该是，您使用的上下文值应该与您提供它的方式相匹配。