React，Typescript - 打印获取的数据

Question

我正在尝试从获取的 JSON 中打印数据，但不知为何我做不到。

interface IFetched {
  fetchedData: any;
  error: any;
}

export default class Testing100 extends React.Component<
  ITesting100Props,
  IFetched,
  {}
> {
  constructor(props: ITesting100Props) {
    super(props);
    this.state = {
      error: null,
      fetchedData: [],
    };
  }

  public componentDidMount() {
    fetch("https://api.randomuser.me/")
      .then((res) => res.json())
      .then(
        (result) => {
          this.setState({
            fetchedData: result,
          });
        },
        (error) => {
          this.setState({
            error,
          });
        }
      );
  }

  public render(): React.ReactElement<ITesting100Props> {
    console.log(this.state.fetchedData.results);
    return (
      <div>
        <a>
          {this.state.fetchedData.map(function (fetchedDataX) {
            return fetchedDataX.results[0].name.first;
          })}
        </a>
      </div>
    );
  }
}

通过控制台日志，我可以打印数据。但是当我将控制台日志从 console.log(this.state.fetchedData.results); 更改为 console.log(this.state.fetchedData.results[0]); 时，我什么也得不到。甚至那个控制台日志也被调用了两次，正如你在控制台输出中看到的那样，我不知道为什么。

但我的目标是将人的名字打印到 <a> 元素中，但我不知道如何实现。希望有人能帮我解决这个问题。谢谢你的时间。

Answer 1

在获取发生之前考虑应用程序的状态 - fetchedData 数组为空。然后当你获取时，你将它转换成一个对象，其中一个 results 字段是一个数组。

您的代码需要能够处理这两种状态。不要尝试使用或记录您尚未首先验证实际存在的内容的字段，否则它会崩溃。

第一步是清理它，这样你就可以直接更新状态中的数组 - 您的地图无法正常工作，因为 fetchedData 有一个内部 results 字段 - 尝试 this.setState({fetchedData: result.results});，然后 console.log(this.state.fetchedData).

此外，您可能还想在 render 的顶部添加一些守卫，这样当 fetchedData 为空或出错时，事情就不会崩溃：

if (this.state.fetchedData === []) return <p>"Nothing Loaded"</p>;
if (this.state.error !== null) return <p>{this.state.error.message}</p>;

至于控制台双输出，那是因为render方法在挂载组件时先得到运行，你看到fetchedData处的输出空，然后 componentDidMount 运行s（获取数据并更新状态）然后 React 使用新状态重新渲染，导致第二个控制台日志。

您尝试访问 .result[0] 的控制台日志失败，因为它对于第一个预取状态不存在。在记录之前检查（如果）它在那里，或者记录整个状态对象。

React，Typescript - 打印获取的数据

React, Typescript - Print fetched data

sharepoint

web-parts

typescript

reactjs

tsx