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 （这里我想刷新数据提供者的状态）

在获取方法之后，只要向数据库发布成功，我想再次呈现该表。

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仅在组件首次安装时触发，并且在重新渲染时不触发。

如果您希望每次组件重新发布时都获取数据，则可以将获取功能放在render的{{1}}方法中。

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

2）您希望state完成某些逻辑后更新DataProvider。

React的作用是。您只能将变量从FormOPCConnect传递到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>内渲染DataProvider并直接更新FormOPCConnect的道具。

否则，请在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中调用该flipBoolean函数。这将更新FormOPCConnect中的state。这将触发App重新渲染。进而将其子节点App FormOPCConnect`重新呈现。

（此变量不必是布尔值，您可以在此处执行任何操作。此布尔值只是一个示例）。

在发帖后刷新表格

1 个答案: