gpt4 book ai didi

javascript - 在第一次渲染期间处理组件中的未定义/空属性

转载 作者:行者123 更新时间:2023-12-03 13:59:39 25 4
gpt4 key购买 nike

我正在学习 React,它很棒,但我遇到了一个问题,我不确定解决它的最佳实践是什么。

我正在从 componentDidMount() 中的 API 获取数据,然后使用 SetState() 设置一些状态。

现在的问题是,因为第一次渲染发生在我的状态设置之前,所以我将初始状态值发送到我的组件中。现在我将它们设置为空数组或空对象({ type: Object, default: () => ({}) })。然后我使用三元运算符来检查 .length 或该属性是否有值。

这是最佳实践还是还有其他我不知道的方法?

我很乐意在这方面获得一些帮助,以便我从一开始就正确地完成基础知识。

谢谢!

最佳答案

我认为最好的做法是告诉用户您的数据仍在加载,然后使用真实数据填充字段。这种方法已在各种博客文章中得到提倡。 Robin Wieruch 有一篇关于如何获取数据的精彩文章,其中 specific example关于如何处理加载数据和错误,我将在这里介绍他的示例。这种方法通常分两部分完成。

  1. 创建一个 isLoading 变量。这是一个 bool 值。我们最初将其设置为 false,因为没有加载任何内容,然后当我们尝试获取数据时将其设置为 true,然后返回到 false > 数据加载后。
  2. 我们必须告诉 React 在给定两个 isLoading 状态的情况下渲染什么。

1。设置 isLoading 变量

由于您没有提供任何代码,我将按照 Wieruch 的示例进行操作。

import React, { Component } from 'react';

class App extends Component {
constructor(props) {
super(props);

this.state = {
dataFromApi: null,
};
}

componentDidMount() {
fetch('https://api.mydomain.com')
.then(response => response.json())
.then(data => this.setState({ dataFromApi: data.dataFromApi }));
}

...
}

export default App;

这里我们使用浏览器的native fetch() api通过使用 componentDidMount() 在组件安装时获取数据。这应该与您现在所做的非常相似。鉴于 fetch() 方法是异步的,一旦收到数据,页面的其余部分将呈现,并且状态将更新。

为了告诉用户我们正在等待数据加载,我们只需将 isLoading 添加到我们的状态中。所以状态变成:

this.state = {
dataFromApi: null,
isLoading: false,
};

isLoading 的状态最初为 false,因为我们尚未调用 fetch()。在我们在 componentDidMount() 中调用 fetch() 之前,我们将 isLoading 的状态设置为 true,如下所示:

this.setState({ isLoading: true });

然后,我们需要向 fetch() Promise 添加一个 then() 方法,一次将 isLoading 的状态设置为 false数据已加载完毕。

.then(data => this.setState({ dataFromAPi: data.dataFromApi, isLoading: false }));

最终的代码如下所示:

class App extends Component {
constructor(props) {
super(props);

this.state = {
dataFromApi: [],
isLoading: false,
};
}

componentDidMount() {
this.setState({ isLoading: true });

fetch('https://api.mydomain.com')
.then(response => response.json())
.then(data => this.setState({ dataFromApi: data.dataFromApi, isLoading: false }));
}

...
}

export default App;

2。条件渲染

React 允许 conditional rendering 。我们可以在 render() 方法中使用简单的 if 语句来根据 isLoading 的状态渲染组件。

class App extends Component {
...

render() {
const { hits, isLoading } = this.state;

if (isLoading) {
return <p>Loading ...</p>;
}

return (
<ul>
{dataFromApi.map(data =>
<li key={data.objectID}>
<a href={data.url}>{data.title}</a>
</li>
)}
</ul>
);
}
}

希望这有帮助。

关于javascript - 在第一次渲染期间处理组件中的未定义/空属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55359176/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com