React Stateを正しく渡す

Question

私は反応するためにreact_on_railsを使用して、リアクションをレールアプリに持ってきました。私はここで間違っていることを100％確信していません。

これは企業のリストであり、ユーザーがリストをフィルタできるようにフォームを使用しています。私はフォーム提出作業を得て、私は適切に結果をレールアプリから（コンソールへの応答を記録してテストして）得ましたが、実際に更新するためにテーブル自体を賭けることはできません。

どうすればいいですか？

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

あなたはこの

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

のような状態を設定

ではなく、実際にはCompanyFiltersの状態を設定しています。 Companiesの状態を更新して、CompaniesListを再レンダリングする必要があります。

Companies内にメソッドを作成して状態を更新し、このメソッドをCompanyFiltersの小道具として渡し、上で引用したsetStateの代わりに実行することができます。