如何将值从反应渲染方法传递给 componentDidMount答案

【问题标题】：How to pass value from react render method to componentDidMount如何将值从反应渲染方法传递给 componentDidMount
【发布时间】：2020-02-20 16:09:46
【问题描述】：

如何将值从 react render 方法传递给 componentDidMount 并使用该值调用 fetch 方法来填充数据。

在下面的代码中，您可能会看到我有两个 fetch 方法，首先 fetch 将数据保存到 'items' 数组和 'items2' 数组应该使用从 render 方法返回的 id 保存一些日期

import React from 'react';

class CustomPage extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
          items: [],
          items2: []
        };
    }
    componentDidMount() {
        fetch('http://localhost:8000/api/v2/pages/')
            .then(response => response.json())
            .then(data => this.setState({ items: data }));

        fetch('http://localhost:8000/api/v2/pages/' + id) //How to get this id is from the render method
            .then(response => response.json())
            .then(data => this.setState({ items2: data }));
    }
    render() {
            let id = this.state.items.items.id; //This id I need to pass to the componentDidMount 
        }
        return (
            <React.Fragment>
                //Here i plan to render the page using the values from the second fetch method
            </React.Fragment>
        );
    }
}

export default CustomPage;

【问题讨论】：

你不能打电话给componentDidMount。相反，请使用您的函数或componentDidUpdate。
this.state.items.items.id 是如何排在第一位的？
好的，谢谢@Antonio，所以我应该在 componentDidUpdate 中使用第二个 fetch
@NadirLaskar items.id是第一个fetch方法返回的api设置的json值
那么你想在第一个 API 调用的响应之后调用第二个 fetch，如果你想在你有 id 后立即调用 fetch

标签： reactjs

【解决方案1】：

您不必从渲染中传递id，您可以在第一次获取响应之后立即调用第二次获取。

// Call second fetch after you get the response
const getPage = (id) => {
   fetch('http://localhost:8000/api/v2/pages/' + data.items.id)
    .then(response => response.json())
    .then(data => this.setState({ items2: data }));
}

从找到id的逻辑中调用getPage(id)方法

componentDidMount() {
    fetch('http://localhost:8000/api/v2/pages/')
       .then(response => response.json())
       .then(data => {
          this.setState({ items: data });
    });
}

【讨论】：

嗨，感谢@Nadir 的更新，我认为这是不可能的，因为 data.items 有多个 id，我有另一个逻辑来过滤掉我想要的特定 id。如果我在问题中添加这些逻辑，我的代码会很长并且可能不可读。
@LalasM 你是在进行第二次 fetch 调用之前从 id 列表中动态选择一个 id 吗？
在这种情况下，您应该在获得要进行 fetch 调用的 id 后立即调用 fetch。

【解决方案2】：

好的，您正在 componentDidMount 中获取 API 并将某些状态设置为

componentDidMount() {
    fetch('http://localhost:8000/api/v2/pages/')
        .then(response => response.json())
        .then(data => this.setState({ items: data }));
}

当您 setState 时，它会自动调用 componentDidUpdate，您可以在此处进行第二次调用

componentDidUpdate(prevProps, prevState) {
  if (this.state.items.items.id !== prevState.items.items.id) { // condition
    fetch(`http://localhost:8000/api/v2/pages/${this.state.items.items.id}`)
        .then(response => response.json())
        .then(data => this.setState({ items2: data }));
  }
}

我正在使用 this.state.items.items.id ，因为您建议它具有 id 这里的条件是必需的，否则会像 React 文档所说的那样导致无限循环

您可以立即在 componentDidUpdate() 中调用 setState()，但请注意它必须包含在条件中

希望对你有帮助

【讨论】：