Question

复制：

const defaultState = {
  value: 1;
  increment() {
    ++this.value;
  }
}

const AppContext = React.createContext({ myState: defaultState });

在React组件中

class MyComponent extends Component {
  static contextType = AppContext;

  componentDidMount() {
    const { myState } = this.context;
    myState.increment();
  }

  render() {
    const { myState } = this.context;
    return <p>{myState.value}</p>;
  }
}

期望

显示2。

实际

显示1。

当状态的内部字段发生变化时，如何更新React组件？

Answer 1

如果在树中的使用者上方没有createContext组件，则给Provider的自变量是上下文的默认值。更改此默认对象不会导致重新渲染上下文的使用者。

您可以改为将Provider放入状态为value的组件中，并使用increment方法更新状态，并通过{{1 }}属性。

示例

value

const AppContext = React.createContext();

class App extends React.Component {
  state = {
    value: 1
  };

  increment = () => {
    this.setState(({ value }) => ({ value: value + 1 }));
  };

  render() {
    const { increment } = this;

    return (
      <AppContext.Provider value={{ myState: { ...this.state, increment } }}>
        <MyComponent />
      </AppContext.Provider>
    );
  }
}

class MyComponent extends React.Component {
  static contextType = AppContext;

  componentDidMount() {
    this.context.myState.increment();
  }

  render() {
    const { myState } = this.context;
    return <p>{myState.value}</p>;
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

我可以在React Context中跟踪嵌套对象的变化吗？

1 个答案: