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 
}) 

같은 상태를 설정

실제로는 Companies이 아닌 CompanyFilters 구성 요소의 상태를 설정하고 있습니다. Companies 상태를 업데이트하여 CompaniesList을 다시 렌더링해야합니다.

이렇게하려면 Companies 내부에 메서드를 만들고이 메서드를 CompanyFilters의 소품으로 전달하고 위에 인용 된 setState 대신 실행하십시오.