Обновить таблицу после поста в реакции

Question

После публикации я хотел бы перезагрузить свою таблицу, чтобы иметь возможность отображать данные после публикации. Теперь возникает вопрос, как заставить мой «DataProvider» отображаться снова?

Я бы сделал это как вызов функции в «FormOPCConnect». Но я не знаю с чего начать. Я уже пытался использовать «реквизиты» «DataProvider», но не могу понять, как отобразить новую таблицу.

Вложен мой исходный код.

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)

После метода выборки я хотел бывыполнить рендеринг таблицы снова, если публикация в базе данных была успешной.

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 DataProvider.

Чтобы повторно отобразить компонент, все, что вам нужно сделать, это обновить его 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>

Здесь проще всего сделать визуализацию 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 для повторного рендеринга. Который, в свою очередь, переопределяет свои дочерние элементы DataProvider and FormOPCConnect`.

(эта переменная не обязательно должна быть логической, вы можете делать здесь все, что захотите. Эта логическая переменная является лишь примером).