Question

我正在尝试在componentDidMount中获取一个api。 api结果将设置为组件的状态，并将该状态映射并传递给子组件。

如果我使用componentDidMount内部的 fetch方法获取api，则一切正常：

componentDidMount(){ fetch(apiToFetch) .then((result) => result.json()) .then((result) => result.entries) .then((entries) => this.setState({ ...this.state, entries })) .catch((error) => console.log(error)); }

如果我在方法内使用 fetch，然后在componentDidMount内部调用此方法，则不会呈现任何内容：

componentDidMount() { this.fetchApiToEntries(GLOBAL_PORTFOLIO_COLLECTION_API); } fetchApiToEntries(apiToFetch) { fetch(apiToFetch) .then((result) => result.json()) .then((result) => result.entries) .then((entries) => this.setState({ ...this.state, entries })) .catch((error) => console.log(error)); }

我无法理解生命周期中缺少的内容。不应该采取以下措施？

初始化状态

渲染

致电componentDidMount

渲染

这是我的初始组件：

export default class Portfolio extends React.Component { constructor(props) { super(props); this.state = { entries: [] } } componentDidMount() { this.fetchApiToEntries(GLOBAL_PORTFOLIO_COLLECTION_API); } fetchApiToEntries(apiToFetch) { fetch(apiToFetch) .then((result) => result.json()) .then((result) => result.entries) .then((entries) => { this.setState({ ...this.state, entries }) }) .catch((error) => console.log(error)); } render() { return ( <Fade bottom> <div className="Portfolio"> <div className="Portfolio__title"><h4 className="color--gradient text--spacing">WORKS</h4></div> <OwlCarousel {...options}> {this.state.entries.map((item) => ( <PortfolioElement item={item} /> ))} </OwlCarousel> <AnchorLink href='#contact'><Button className="contact-button btn--gradient slider-button Services__button">Let's get in touch</Button></AnchorLink> </div> </Fade> ) } }

PortfolioElement是未呈现的实际组件。有什么建议吗？谢谢。

编辑：两种方法都没有以正确的方式重新呈现组件（...我没想到的事情：我不知道为什么，但是如果我在componentDidMount中两次调用它们，组件将呈现正确的方式）。我想我在该州缺少一些东西。

我在控制台中没有错误，这是设置初始状态的方式：

this.state={entries:[]}

这是控制台中的实际条目：

entries: [0:{credits: "..." description: "..." featuredImage: {path: "portfolio/01.jpg"} firstImage: {path: "portfolio/firstimage.jpg"} secondImage: [] slug: "..." tasks: (5) [{…}, {…}, {…}, {…}, {…}] title: "..." _by: "5beae6553362340b040001ee" _created: 1542123322 _id: "5beaef3a3362340bf70000b4" _mby: "5beae6553362340b040001ee" _modified: 1542149308 }, 1:{...} ]

提取后的状态是相同的。

更新我发现问题是：当状态改变时，组件没有使用正确的道具重新渲染孩子。我通过道具传递了一个高阶组件中的API，并添加了componentWillUpdate方法来强制进行状态刷新以重新呈现该组件。这不是理想的解决方案，但直到现在我还没有弄清楚其他方法。有什么建议吗？

Answer 1

您是否需要在构造函数中绑定fetchApiToEntries或使用粗箭头？

this.fetchApiToEntries = this.fetchApiToEntries.bind(this);

对不起，我无法评论足够的代表

Answer 2

Idk，您的api响应是什么，但我使用伪造的API测试了您的代码并进行了更改

fetchApiToEntries(apiToFetch){}

到箭头功能（Arrow Function）

fetchApiToEntries = (apiToFetch) => {}

工作正常。

完整示例：



    export default class Portfolio extends React.Component {
        constructor(props) {
            super(props);
            this.state = {
                entries: []
            }
        }
        componentDidMount() {
          this.fetchApiToEntries('https://jsonplaceholder.typicode.com/posts');
        }
        fetchApiToEntries = (apiToFetch) => {
            fetch(apiToFetch)
                .then(result => result.json())
                .then((entries) => {
                    this.setState({
                        ...this.state,
                        entries
                    })
                })
                .catch((error) => console.log(error));
        }
        render() {
          const {entries} = this.state;
            console.log(entries);
            return (
                // Everything you want to render.
            )
        }
    }

希望它对您有帮助。

反应componentDidMount获取API

2 个答案: