在反应后刷新表

Question

发布后我想重新加载我的表格，以便能够在发布后显示数据。现在问题来了，如何让我的“DataProvider”再次渲染？

我会在“FormOPCConnect”中作为函数调用来执行此操作。但我不知道如何开始。我已经尝试使用“DataProvider”的“props”，但我不知道如何渲染新表。

附上我的源代码。

TableOPCConnections.js

import React from "react";
import PropTypes from "prop-types";
import key from "weak-key";
import Table from 'react-bootstrap/Table'

const OPCVarTable = ({ data }) =>
  !data.length ? (
    <p>Nothing to show</p>
  ) : (
    <div>
      <h2 className="subtitle">
        Showing <strong>{data.length}</strong> OPC Variables
      </h2>
      <Table striped bordered hover>
        <thead>
          <tr>
            {Object.entries(data[0]).map(el => <th key={key(el)}>{el[0]}</th>)}
          </tr>
        </thead>
        <tbody>
          {data.map(el => (
            <tr key={el.id}>
              {Object.entries(el).map(el => <td key={key(el)}>{el[1]}</td>)}
            </tr>
          ))}
        </tbody>
      </Table>
    </div>
  );
OPCVarTable.propTypes = {
  data: PropTypes.array.isRequired
};

export default OPCVarTable;

DataProvider.js

import React, { Component } from "react";
import PropTypes from "prop-types";

class DataProvider extends Component {
  static propTypes = {
    endpoint: PropTypes.string.isRequired,
    render: PropTypes.func.isRequired
  };
  state = {
      data: [],
      loaded: false,
      placeholder: "Loading..."
    };
  componentDidMount() {
    fetch(this.props.endpoint)
      .then(response => {
        if (response.status !== 200) {
          return this.setState({ placeholder: "Something went wrong" });
        }
        return response.json();
      })
      .then(data => this.setState({ data: data, loaded: true }));
  }
  render() {
    const { data, loaded, placeholder } = this.state;
    return loaded ? this.props.render(data) : <p>{placeholder}</p>;
  }
}
export default DataProvider;

FormOPCConnect.js （这里我想刷新一下DataProvider的状态）

在 fetch 方法之后，只要 post 到数据库成功，我想再次渲染表。

import React, { Component, useState } from "react";
import PropTypes from "prop-types";
import Button from "react-bootstrap/Button";
import Form from 'react-bootstrap/Form'
import DataProvider from "./DataProvider";

import csrftoken from './csrftoken';

class FormOPCConnect extends Component {
  constructor(props) {
    super(props);
    this.state = {
      validated: false
    };
  }
  static propTypes = {
    endpoint: PropTypes.string.isRequired
  };
  state = {
    ip_address: "",
    port: "",
    namespace_name: "",
    root_name: "",
    owner: ""
  };

  handleChange = e => {
    this.setState({ [e.target.name]: e.target.value });
  };

  handleSubmit = event => {
    const form = event.currentTarget;
    if (form.checkValidity() === false) {
      event.preventDefault();
      event.stopPropagation();
    }
    event.preventDefault();
    const { ip_address, port, namespace_name, root_name, owner } = this.state;
    const opcConn= { ip_address, port, namespace_name, root_name, owner };
    const conf = {
      method: "post",
      body: JSON.stringify(opcConn),
      headers: new Headers({ "Content-Type": "application/json", "X-CSRFTOKEN": csrftoken })
    }

    fetch(this.props.endpoint, conf).then(response => console.log(response));

    //>>
    //if response is valid -> refresh the Dataprovider and the table...
    //<<

    this.setState({ validated: this.state.validated = true })

  };

App.js

const App = () => (
<React.Fragment>
<Container>
<Row>
 <Col> <NavBarTop fixed="top" /> </Col>
  </Row>
  <Row>
    <Col>  <DataProvider endpoint="opcconnection/"
                render={data => <OPCVarTable data={data} />} /></Col>
    <Col><FormOPCConnect endpoint="opcconnection/" /></Col>
  </Row>
</Container>
  </React.Fragment>
);

const wrapper = document.getElementById("app");

wrapper ? ReactDOM.render(<App />, wrapper) : null;

我是 React 新手，所以请原谅我的错误。 :D

最后看起来像这样。 OPCConnection_Image

Answer 1

您的代码当前包含 2 个需要修复的问题，以便在您发布数据时更新您的表格。

---

1) 您的 DataProvider 实际上会在 props 更改时重新渲染。这里的问题是您获取data 的逻辑在componentDidMount 中。 componentDidMount 仅在组件第一次挂载时触发，不会在重新渲染时触发。

如果您希望每次组件重新呈现时都获取数据，您可以将获取功能放在 DataProvider 的 render 方法中。

要重新渲染组件，您只需更新其props 或state。

---

2)您希望您的DataProvider 在您的FormOPCConnect 完成一些逻辑后更新。

React 的特点是。您只能将变量从parents 传递到children。您不能直接从sibling 到sibling 或从child 到parent 通信。

在您的App 中，您的DataProvider 是FormOPCConnect 的符号，它们彼此相邻。

<App> // App can communicate with every component inside it.
   <DataProvider /> // This component can't communicate with the component next to it.
   <FormOPCConnect />
</App>

这里最简单的做法是在FormOPCConnect 中渲染DataProvider 并直接更新DataProvider 的道具。

或者，如果这不可能，请在 App 中保留一个状态，以检查您在 FormOPCConnect 中的逻辑是否已完成。

class App extends Component {
  constructor(props) {
    super(props);
    this.state = { boolean: false }; //state is remembered when a component updates.
  }

  flipBoolean() { //this function updates the state and rerenders App when called.
    this.setState(
      boolean: boolean!
    );
  };

  render {
    return (
      <Fragment>
        <DataProvider />
        <FormOPCConnect flipBoolean={this.flipBoolean} />
      </Fragment>
    )
  }
}

将一个函数传递给FormOPCConnect，它会更新App 的状态。当您希望 DataProvider 重新渲染时，您只需在 FormOPCConnect 中调用 flipBoolean 函数。这将更新App 中的state。这将触发App 重新渲染。这又会重新渲染它的孩子DataProvider andFormOPCConnect`。

（这个变量不需要是布尔值，你可以在这里做任何你想做的。这个布尔值只是一个例子）。