Доступ к контексту реакции вне функции рендеринга

Я разрабатываю новое приложение, используя новый React Context API вместо Redux, и раньше, когда Redux, когда мне нужно было получить список пользователей, например, я просто вызывал в componentDidMount свое действие, но теперь с React Context мои действия живут внутри моего Consumer, который находится внутри моей функции рендеринга, что означает, что каждый раз, когда вызывается моя функция рендеринга, он будет вызывать мое действие, чтобы получить список моих пользователей, и это не хорошо, потому что я буду делать много ненужных запросов.

Итак, как я могу вызывать только одно действие, как в componentDidMount, вместо вызова в render?

Просто для примера, посмотрите на этот код:

Давайте предположим, что Я обертываю все свои Providers в один компонент, например:

import React from 'react';

import UserProvider from './UserProvider';
import PostProvider from './PostProvider';

export default class Provider extends React.Component {
  render(){
    return(
      <UserProvider>
        <PostProvider>
          {this.props.children}
        </PostProvider>
      </UserProvider>
    )
  }
}

Затем я помещаю этот компонент-провайдер, обертывающий все мое приложение, вот так:

import React from 'react';
import Provider from './providers/Provider';
import { Router } from './Router';

export default class App extends React.Component {
  render() {
    const Component = Router();
    return(
      <Provider>
        <Component />
      </Provider>
    )
  }
}

Теперь, в мои пользователи видят, например, что-то вроде этого:

import React from 'react';
import UserContext from '../contexts/UserContext';

export default class Users extends React.Component {
  render(){
    return(
      <UserContext.Consumer>
        {({getUsers, users}) => {
          getUsers();
          return(
            <h1>Users</h1>
            <ul>
              {users.map(user) => (
                <li>{user.name}</li>
              )}
            </ul>
          )
        }}
      </UserContext.Consumer>
    )
  }
}

Я хочу вот что:

import React from 'react';
import UserContext from '../contexts/UserContext';

export default class Users extends React.Component {
  componentDidMount(){
    this.props.getUsers();
  }

  render(){
    return(
      <UserContext.Consumer>
        {({users}) => {
          getUsers();
          return(
            <h1>Users</h1>
            <ul>
              {users.map(user) => (
                <li>{user.name}</li>
              )}
            </ul>
          )
        }}
      </UserContext.Consumer>
    )
  }
}

Но, конечно, приведенный выше пример не работает, потому что getUsers не живу в моем окне просмотра пользователей. Как правильно сделать это, если это вообще возможно?

57
задан 4 November 2018 в 12:46

2 ответа

возможно, Вы называете компонент с нижним регистром как

<Context.consumer> 

, это неправильно, что необходимо звонить с верхним регистром как

<Context.Consumer> 
-1
ответ дан 1 November 2019 в 16:53

С моей стороны было достаточно добавить .bind(this) к событию. Это - то, как мой Компонент похож.

// Stores File
class RootStore {
   //...States, etc
}
const myRootContext = React.createContext(new RootStore())
export default myRootContext;


// In Component
class MyComp extends Component {
  static contextType = myRootContext;

  doSomething() {
   console.log()
  }

  render() {
    return <button onClick={this.doSomething.bind(this)}></button>
  }
}
0
ответ дан 1 November 2019 в 16:53

Другие вопросы по тегам:

Похожие вопросы: