Question

如何将值从react渲染方法传递到componentDidMount，然后使用该值调用fetch方法来填充数据。

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

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;

Answer 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 }));
}

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

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

Answer 2

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

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

当您设置状态时，它将自动导致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（），但请注意，必须将其包装在条件中

希望有帮助

如何将值从react渲染方法传递给componentDidMount

2 个答案: