0

我是反应新手，并使用 react_on_rails 将反应带入 Rails 应用程序。我不是 100% 确定我在这里做错了什么。

这是一个公司列表，我正在使用一个表单来允许用户过滤列表。我让表单提交工作，并且我正确地从 rails 应用程序返回结果（通过将响应记录到控制台进行测试），但我不能打赌表本身会实际更新。

我怎样才能做到这一点？

公司.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>
        );
    }
}

公司列表.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
4

1 回答 1

0

当你像这样设置状态时

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

您实际上是在设置CompanyFilters组件的状态，而不是Companies. 您需要更新 的状态，Companies以便它重新渲染您的CompaniesList.

为此，您可以在Companies其中创建一个将更新状态的方法，并将此方法作为道具传递给CompanyFilters并执行它来代替上面引用的 setState。

于 2017-10-31T16:38:05.310 回答