Próbuję zrozumieć, jak działa interfejs API kontekst. Chciałbym zachować stan globalny, który mogę zaktualizować z dowolnego elementu klasy. Obecnie, kiedy próbuję zaktualizować mój kontekst za pomocą podanej funkcji, aktualizuje tylko wartość lokalnie. W moim kodzie próbuję zaktualizować pole "Dzień" w "Hello", a zmiana może być widoczna tylko wtedy, gdy pisarz jest renderowany. Gdy tylko zapytam przeglądarkę, aby uczynić "czytelnikiem", znowu jest "dzień". Dlaczego to się dzieje? Oto mój kod, upraszczam to tyle, ile mogłem:

index.js:
    import React from "react";
    import ReactDOM from "react-dom";
    import {ThemeContextProvider} from "./ThemeContext";
    
    import App from "./App";
    
    ReactDOM.render(
    <ThemeContextProvider>
       <App />
    </ThemeContextProvider>,
  document.getElementById("root")
);
app.js:
import React from "react";
import Writer from "./Writer.js";
import Reader from "./Reader.js";
import { Context } from "./ThemeContext.js";
import {BrowserRouter as Router, Switch, Route} from 'react-router-dom';

class App extends React.Component {
  static contextType = Context;
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div className="app">
        <Router>
          <Switch>
            <Route path="/writer" component={Writer}></Route>
            <Route path="/reader" component={Reader}></Route>      
          </Switch>
        </Router>
      </div>
    );
  }
}

export default App;
context.js:
import React, { Component } from "react";
const Context = React.createContext();
const { Provider, Consumer } = Context

// Note: You could also use hooks to provide state and convert this into a functional component.
class ThemeContextProvider extends Component {
  state = {
    theme: "Day"
  };

  setTheme = (newTheme) => {
    this.setState({theme: newTheme})
  };

  render() {
    return <Provider value={{theme: this.state.theme, setTheme: this.setTheme}}>{this.props.children}</Provider>;
  }
}

export { ThemeContextProvider, Consumer as ThemeContextConsumer, Context };
writer.js:
import React from "react";
import {Context} from "./ThemeContext";

class Writer extends React.Component {
  static contextType = Context
  constructor(props) {
    super(props);
    this.write = this.write.bind(this)
  }

  write () {
    this.context.setTheme("hello")
  }

  render() {
    return (
      <div>
        <button onClick={this.write}>press</button>
        <p>{this.context.theme}</p> 
      </div>
    );
  }
}

export default Writer;
reader.js:
import React from "react";
import { Context, ThemeContextConsumer } from "./ThemeContext";

class Reader extends React.Component {
  static contextType = Context;
  constructor(props) {
    super(props);
  }
  render () {
    return(
          <div>
            <p>{this.context.theme}</p>
          </div>
  );}
}

export default Reader;
3
Turgut Kursun 21 listopad 2020, 23:00

1 odpowiedź

Najlepsza odpowiedź

Jak radzisz sobie z manewrem na różne strony? Jeśli teraz radzisz sobie z nim ręcznie, wpisując go bezpośrednio w wyszukiwarce Wejdź do przeglądarki Placeholder. Wtedy nie będzie działać od strony uzyskania refresh. Używanie tylko context api nie spowoduje utrzymywania danych. Musisz wprowadzić użycie jakiegoś rodzaju storage, aby zrobić go trwałe .

W każdym razie, twój kod powinien działać, jeśli nie ma strony refresh. Aby zobaczyć go na różnych stronach, możesz i Link (z pakietu react-router-dom) lub w zasadzie button, aby przekierować cię do różnych stron, takich jak: -

  • Po prostu dodaj to w swoim Writer.js component do celów testowych: -
import React from "react";
import { Link } from 'react-router-dom'
import {Context} from "./ThemeContext";

class Writer extends React.Component {
  static contextType = Context
  constructor(props) {
    super(props);
    this.write = this.write.bind(this)
  }

  write () {
    this.context.setTheme("hello")
  }

  render() {
    return (
      <div>
        <button onClick={this.write}>press</button>
        <p>{this.context.theme}</p> 
        <Link to="/reader">Go to Reader page</Link>
      </div>
    );
  }
}

export default Writer;
1
lala 22 listopad 2020, 05:53