React State richtig übergeben

Question

Ich bin neu zu reagieren und react_on_rails zu verwenden, um reagieren in eine Rails App. Ich bin mir nicht 100% sicher, was ich hier falsch mache.

Dies ist eine Liste von Firmen und ich verwende ein Formular, um einem Benutzer zu erlauben, die Liste zu filtern. Ich habe das Formular abschicken funktioniert und ich bekomme richtig Ergebnisse von der Rails-App (getestet durch Protokollierung der Antwort auf die Konsole), aber ich kann nicht darauf wetten, die Tabelle selbst zu aktualisieren.

Wie kann ich das tun?

Companies.jsx

import React from 'react'; 
import CompaniesList from './CompaniesList' 
import CompanyFilters from './CompanyFilters' 

export default class Companies extends React.Component { 

    constructor(props, _railsContext) { 
    super(props) 
    let companies = JSON.parse(this.props.companies) 
    this.state = { companies: companies.companies } 
    } 

    render() { 
    return (
     <div> 
     <CompanyFilters /> 
     <CompaniesList companies={this.state.companies} /> 
     </div> 
    ); 
    } 
} 

CompanyFilters.jsx

import PropTypes from 'prop-types'; 
import React from 'react'; 
import axios from 'axios'; 

export default class CompanyFilters extends React.Component { 
    constructor(props) { 
     super(props) 
     this.state = { 
      search_company: '', 
      search_city: '' 
     } 
    } 

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

    handleSubmit = (e) => { 
     e.preventDefault() 

     axios.get(`/companies.json?search_company=${this.state.search_company}&search_city=${this.state.search_city}`) 
     .then((response) => { 
      console.log("worked") 
      this.setState({ 
       companies: response.data 
      }) 
     }) 
     .catch((error) => { 
      // this needs to be handled still 
      console.log(error) 
     }) 
    } 

    render() { 
     return(
      <div> 
       <div className="row"> 
        <div className="portlet light"> 
         <div className="portlet-title"> 
          <div className="caption"> 
           <span className="caption-helper"><i className="fa fa-bar-chart font-green-sharp"></i></span> 
           <span className="caption-subject font-green-sharp bold uppercase">Filter This Data:</span> 
           <span className="caption-helper"><i className="fa fa-question-circle" data-toggle="tooltip" data-placement="top" title="You can filter this data by any of the filters below. You can set it back to the default at anytime by hitting the reset button."></i></span> 
          </div> 
         </div> 
         <div className="portlet-body"> 
          <form onSubmit={this.handleSubmit} > 
           <div className="row"> 
            <div className="col-md-12"> 
            <div className="col-md-3"> 
             <input placeholder="Search by Company Name" className="form-control" name="search_company" value={this.state.search_company} onChange={this.handleChange} /> 
            </div> 
            <div className="col-md-3"> 
             <input placeholder="Search by City" className="form-control" name="search_city" value={this.state.search_city} onChange={this.handleChange} /> 
            </div> 
            <div className="col-md-3"> 
             <input placeholder="Search by Distributor Company Name" className="filterrific-periodically-observed form-control" type="text" name="filterrific[search_distributor]" id="filterrific_search_distributor" /> 
            </div> 
            <div className="col-md-3"> 
             <input placeholder="Search by Rheem User Email" className="filterrific-periodically-observed form-control" type="text" name="filterrific[with_rheem_user]" id="filterrific_with_rheem_user" /> 
            </div> 
            </div> 
           </div> 
           <div className="col-md-1"> 
            <input type="submit" name="commit" value="Filter" className="btn btn-success pull-right" /> 
           </div> 
           <div className="col-md-1"> 
            <a className="btn btn-danger" href="/companies?filterrific%5Breset_filterrific%5D=true">Reset</a> 
           </div> 
          </form> 
         </div> 
        </div> 
       </div> 
      </div> 
     ); 
    } 
} 

CompanyList.jsx

import React from 'react' 
import ListCompany from './ListCompany' 
import { Table } from 'react-bootstrap' 

const CompanysList = ({companies}) => 
    <div> 
     <Table striped bordered hover> 
     <thead> 
      <tr> 
       <td>ID</td> 
       <td>Company Name</td> 
       <td>Address</td> 
       <td>Enrolled Reputation</td> 
       <td>Links</td> 
      </tr> 
     </thead> 
     <tbody> 
      {companies.map((company) => { 
      return(<ListCompany company={company} key={company.id} />) 
      })} 
     </tbody> 
     </Table> 
    </div> 

export default CompanysList 

Answer 1

Wenn Sie den Zustand wie dieser

this.setState({ 
    companies: response.data 
}) 

gesetzt

Sie setzen tatsächlich den Status CompanyFilters Komponente und nicht die Companies. Sie müssen den Status Companies aktualisieren, damit Ihr CompaniesList wieder rendert.

Um dies zu tun, können Sie eine Methode innerhalb Companies erstellen, die den Zustand aktualisieren und diese Methode als Prop zu übergeben und es anstelle des oben genannten setState ausführen.