Question

我很反应并使用react_on_rails将反应带入rails应用程序。我不是100％肯定我在这里做错了什么。

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

我该怎么做？

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。您需要更新Companies的状态，以便重新呈现CompaniesList。

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

正确传递React状态

1 个答案: