Question

React的新功能 - 我想通过Axios向我的Rails后端发出GET请求，以引入组织列表中的静态数据（只是用户具有搜索功能的表）。

目前，我通过手工制作的一系列组织传递我想要的方式，作为我的WholeApp类的道具。现在，我想调用API端点来实现相同的效果，但需要使用真实数据。

但是，当我通过Axios调用将状态设置为组织列表时，我认为它会在调用完成之前尝试呈现组件，并且在OrgTable类（构建表）中出现未定义的错误。

我想我错过了一些明显的东西，但却找不到它。我很确定它不是this之类的语法错误，或者说没有ES6 sytnax我没有正确绑定。

这是我拨打Axios的地方：

class WholeApp extends Component {
  constructor(props) {
    super(props);

    this.state = {
      filterText: '',
      organizations: []
    };
    this.handleFilterTextInput = this.handleFilterTextInput.bind(this);
  }

  handleFilterTextInput(filterText) {
    this.setState({
      filterText: filterText
    });
  }

  componentDidMount() {
    axios.get('http://localhost:3000/api/v1/organizations').then((result) => {
      this.setState({ organizations: result.data });
    });
  }

  render () {
    return (
      <div>
        <TableInfoText />
        <SearchBar
          filterText={this.state.filterText}
          onFilterTextInput={this.handleFilterTextInput}
        />
        <OrgTable
          // orgs={this.props.orgs}
          orgs={this.state.orgs}
          filterText={this.state.filterText}/>
      </div>
    );
  }
}

另外，如果我将调试器放在axios.get调用的返回值中，this将返回未定义状态。如果我在OrgTable上使用this.props.orgs，它可以正常工作（使用我手工制作的组织）。使用this.state.orgs的未注释部分在遇到forEach时会抛出错误：

class OrgTable extends Component {
  render () {
    const rows = [];

    this.props.orgs.forEach((org) => {
      if ((org.name + org.city + org.county + org.state + org.zip).toLowerCase().indexOf(this.props.filterText) === -1) {
        return;
      }
      rows.push(<OrgRow org={org} key={org.name}/> );
    });

    return(
      <table>
        <thead>
          <tr>
            <th>Name</th>
            <th>City</th>
            <th>County</th>
            <th>State</th>
            <th>ZIP</th>
          </tr>
        </thead>
        <tbody>{rows}</tbody>
      </table>
    );
  }
}

我通过以下方式从另一个文件渲染整个文件：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import WholeApp from './App';
import {organizations} from './App';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(
  <WholeApp orgs={organizations} />,
  document.getElementById('root')
);
registerServiceWorker();

任何想法如何才能正确连线？

Answer 1

您应该将组织设置为组织。因为这是你在ajax请求之后更新的内容。相应地更改OrgTable属性。

<OrgTable
    orgs={this.state.organizations}
    filterText={this.state.filterText}/>

在获得数据之前，您还希望允许占位符。或者至少为null。

{ this.state.organizations && <OrgTable
      orgs={this.state.organizations}
      filterText={this.state.filterText}/> }

Axios React GET请求 - 从API调用设置状态或道具？

1 个答案: