Невозможно установить значения реквизита после удаления записи из списка в React context API

Question

Мы работаем с проектом, в котором у нас разные роли: бизнес, пользователи, организация.Для этого у нас есть разные вкладки для ролей.

При нажатии на каждую вкладку мы хотим связать список организаций, в настоящее время мы повторяем код получения списка организаций для каждого файла, который не являетсятаким образом, мы использовали контекстный API, который сделает его более надежным, чтобы использовать один файл кода для получения списка организаций.

Все работает нормально, однако после удаления организации из списка я не могу установить реквизит.Вот код:

context.js

import React from 'react';
export const {Provider, Consumer} = React.createContext({})

List.js

import React, { Component } from "react";
import { Consumer } from '../../components/context';

export default  class List extends Component {
  state = {
    organizations: [],
  };

  deleteOrganization(id) {
    var self = this;
    OrganizationService.deleteOrganization(id)
      .then(function(response) {
        if (response.status === 200) {
          self.handleDeleteSuccessResponse(response);
        } else {
          console.log(response.data.errors)
        }
      })
      .catch(function(error) {
        console.log(error.response.data.errors)
      });
  }

  handleDeleteSuccessResponse(response) {
    var self = this;
    const organizations = self.state.organizations.filter(
      organization => organization.id !== self.state.alert.objectId
      );
      if (organizations.length === 0) {
        this.getOrganizations();
      }
        this.props.context.updateValue(organizations); //seems like props not getting here
        self.setState({
      organizations: organizations
    });
  }

  render() {
    const { organizations} = this.state;
    const { match } = this.props;
    return (
      <div className="welcome-wrap">
        <h3 className="text-center">Organizations</h3>
        <hr />

        <Consumer>
          {(context) => (
            <Component
              { ...this.props }
              context={context}
            />,
             console.log(context),
            <table className="table table-bordered">
              <thead>
                <tr>
                  <th scope="col">Name</th>
                </tr>
              </thead>
              <tbody>
                {context.value.organizations.map(organization => (
                  <tr key={organization.id}>
                    <td>{organization.name}</td>
                     <td>
                      <a
                        className="delete-btn"
                        onClick={event => this.deleteOrganization(organization.id)}
                      >
                        Delete
                      </a>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
            )
          }
        </Consumer>
      </div>
    );
  }
}

User.js

import React, { Component } from "react";
import { Provider } from './../context';

// Import helper
import {
  currentLoggedInUser,
} from "../../components/Helper";

// import service
import { OrganizationService } from "../../services/Index";

export default class User extends Component {
  constructor() {
    super()
    this.state = {
    actions: {
      getOrganizations: this.getOrganizations,
      updateValue: this.updateValue
      },
    organizations: []
    };
  };
  componentWillMount(){
    var id = currentLoggedInUser().belongs.id;
    this.getOrganizations(id);
  }
  getOrganizations(id) {
    var self = this;
    OrganizationService.getOrganizations(id)
      .then(function(response) {
        var data = response.data;
        self.setState({ organizations: data.data });
      })
      .catch(function(error) {
        console.log(error.response);
      });
  }
  updateValue = (val) => {
    this.setState({organizations: val});
  }
  render() {
        const { match } = this.props;
        return (
          <Provider value={{ value: this.state, updateValue: this.updateValue}} >
            <List />
        </Provider>
        );
      }
    }

Я создалконтекст и определение <Provider> в user.js и доступ к <Consumer> в list.js, который отображает все организации.

Теперь я удалил некоторую организацию, и она удаляется из БД, однако список неполучая обновление, и я могу видеть старые значения, как только я обновляю страницу, удаленная запись исчезает.

Теперь я хочу отправлять обновленные организации в контексте, но не получать реквизиты.

this.props.context.updateValue(organizations);

Как настроить реквизиты для получения контекста?

Мне нужно обновитьот потребителя к состоянию провайдера.

Answer 1

учитывайте изменение в вызове функции deleteOrganization, ваши значения или функции, переданные в качестве значения контекста, будут доступны только в реквизитах рендеринга, переданных потребителю, поэтому вам нужно передать эту функцию в качестве обратного вызова вашей функции deleteOrganization и передать эту функциювместе со следующей функцией, пока вы ее не вызовете.вместо вызова this.props.context.updateValue вызывается функция переданного аргумента.

import React, { Component } from "react";
import { Consumer } from '../../components/context';

export default  class List extends Component {
 state = {
   organizations: [],
 };

deleteOrganization(id, updateValueFn) {
  var self = this;
  OrganizationService.deleteOrganization(id)
  .then(function(response) {
    if (response.status === 200) {
       self.handleDeleteSuccessResponse(response, updateValueFn);
    } else {
      console.log(response.data.errors)
    }
  })
  .catch(function(error) {
    console.log(error.response.data.errors)
  });
}

handleDeleteSuccessResponse(response, updateValueFn) {
var self = this;
const organizations = self.state.organizations.filter(
  organization => organization.id !== self.state.alert.objectId
  );
  if (organizations.length === 0) {
    this.getOrganizations();
  }
    updateValueFn(organizations); //seems like props not getting here
    self.setState({
  organizations: organizations
});
}

render() {
const { organizations} = this.state;
const { match } = this.props;
return (
  <div className="welcome-wrap">
    <h3 className="text-center">Organizations</h3>
    <hr />

    <Consumer>
      {(context) => (
        <Component
          { ...this.props }
          context={context}
        />,
         console.log(context),
        <table className="table table-bordered">
          <thead>
            <tr>
              <th scope="col">Name</th>
            </tr>
          </thead>
          <tbody>
            {context.value.organizations.map(organization => (
              <tr key={organization.id}>
                <td>{organization.name}</td>
                 <td>
                  <a
                    className="delete-btn"
                    onClick={event => this.deleteOrganization(organization.id, context.updateValue)}
                  >
                    Delete
                  </a>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
        )
      }
    </Consumer>
  </div>
);
}
}

Answer 2

Вы можете вызвать функцию, переданную в качестве реквизита в провайдере, т.е. updateValue в получателе, так же, как вы использовали consumer.value, вы также можете вызвать consumer.updateValue(updatedValue), который выполнит updateValue в провайдере

<Consumer>
 {(context) => (
    <Component
    { ...this.props }
    context={context}
    updateValue={consumer.updateValue} // e.g. passed as prop to other component which will execute this function.
        />,
    .........
    .........

    {consumer.updateValue(someUpdatedValue)} // e.g. values can be updated by executing the function  
    .........
    .........

  }
    </Consumer>