Question

我正在应用程序中创建公司页面。网址如下：example.com/companies/google

我从运行localhost 4000的API获取数据，并且当它返回该数据时，它将在控制台中返回该数据。

虽然这很好，但是如果我想将状态设置为仅一个对象，我将不得不执行类似this.setState = { company: res.data[0] }的操作。在我看来，考虑到它只会返回一个对象，似乎有一种更好的方法。旁注：我现在才进入Javascript / react世界，所以如果我在这里没有明显的地方，请原谅。下面只是在控制台中返回响应数据的组件安装函数。

是否有更好的方法来设置公司状态，而不是根据它返回的数组中的第一个索引进行设置？

componentWillMount() {
    axios
      .get(`http://localhost:4000/companies/${this.props.match.params.name}`)
      .then(res => {
        console.log(res.data);
      });
  }

Answer 1

如果您始终希望获得第一个结果，则完全可以接受。有时，API很奇怪或被设计为以列表形式使用，但我们始终知道我们想要第一个结果。您可能还需要检查的唯一一件事是，res.data是否可以为null或未定义，以避免出现错误：

if (res.data) {
  this.setState({ company: res.data[0] })
}

Answer 2

通常，您希望将数据交互与组件尽可能地分开。

我建议创建一个服务，该服务包装您的api并将数据以您想要的格式返回到您的组件。

将类似下面的代码的内容放入另一个.js文件，并将其导入您的组件：

export default class companyService {
    get(companyName) {
          return axios
      .get(`http://localhost:4000/companies/${companyName}`)
      .then(res => {
        return res.data[0];
      });
    }

}

然后在componentWillMountMethod中调用companyService.get（this.props.match.params.name）

从数组索引反应setState

2 个答案: