如何只获取一个元素答案

【问题标题】：How to fetch only one element如何只获取一个元素
【发布时间】：2020-03-07 10:22:03
【问题描述】：

我正在尝试使用 axios 从 api 获取数据，问题是我只想要一个具有特定 id 的元素，但是当我使用 console.log 时，我得到了数百行相同的元素

 constructor(props) {
    super();
    const id= props.match.params.id;
    this.state = {
        items: [],
        id: id,
    }

}

render() {
    axios.get(`http://api.tvmaze.com/shows/${this.state.id}`)
    .then(res => {
        this.setState({ items: res.data });
      // console.log(this.state.items);
    });

【问题讨论】：

你想从那个 API 中得到什么？如果我使用 id 访问该端点，我只会得到一个具有许多属性的对象。例如：api.tvmaze.com/shows/1
当我在控制台中显示时，我获得同一个对象的次数太多，需要限制它，我尝试了api.tvmaze.com/shows/${this.state.id}_limit=1，但它被核心策略阻止了
我明白了。你的渲染里还有什么？每次发生渲染时，您都会发送 API 请求，因此您可能希望从渲染中删除该调用并将其放在 componentDidMount 中。
确实是问题所在，非常感谢。
不客气。我在讨论中发布了一个实际答案。

标签： reactjs

【解决方案1】：

将 axios.get 移至 componentDidMount() 生命周期函数并移出渲染。正如目前所写的那样，它将在每次渲染时被调用，因此每个状态、道具或父组件都会渲染。如果将它移到生命周期方法内部，它将在组件挂载时调用 get 端点，只需一次。

【讨论】：

【解决方案2】：

如果你的 props 或你的 state 发生变化，就会渲染一个 React 组件。如果您更新您的状态或道具，您的 UI 元素将被更新，因为函数 render 将被调用，这会导致多次重新渲染。

因此，您需要将对 API 的调用从渲染函数转移到另一个函数，因为您的渲染函数可能会被调用很多次，而您不想向 API 发送相同的请求好几次。使用类组件时，您可以将 API 调用添加到 componentDidMount 生命周期函数。

【讨论】：