reactjs - 从 React context API 中的列表中删除记录后无法设置 props 值

Question

我们正在参与该项目，在该项目中我们扮演着不同的角色，如业务、用户、组织。为此，我们为角色提供了不同的选项卡。

当点击每个选项卡时，我们想要绑定(bind)组织列表，目前我们正在重复获取每个文件上的组织列表的代码，这不是最佳实践，因此，我们使用了 context API，这将使它更容易健壮，使用单个代码文件来获取组织列表。

一切正常，但是，从列表中删除组织后，我无法设置 Prop 。这是代码:

context.js

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

列表.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>
    );
  }
}

用户.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 中显示所有组织。

现在我删除了一些组织，它正在从数据库中删除，但是，列表没有得到更新，并且一旦刷新页面，删除的记录就会消失，我能够看到旧值。

现在我想发送上下文中更新的组织，但不获取 Prop 。

this.props.context.updateValue(organizations);

如何设置获取上下文的 Prop ？

我面临着从消费者状态更新到提供者状态。

Answer 1

考虑对deleteOrganization函数调用的更改，作为上下文值传递的值或函数将仅在提供给消费者的渲染 Prop 中可用，因此您需要将该函数作为回调传递给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>
);
}
}