获取 JSON 并使用 react 进行渲染

7BitAscii

我的 fetch 给了我以下 JSON:

"{"name":"John","age":26,"city":"London"}"

但是,当我尝试像这样在我的页面上呈现它时:

import React from 'react';
import './App.css';
import * as microsoftTeams from "@microsoft/teams-js";

class Tab extends React.Component {
  constructor(props){
    super(props)
    this.state = {
      context: {}
    }
  }

  componentDidMount() {
    fetch("http://localhost/openims/json.php?function=getDocuments&input=")
      .then(res => res.json())
      .then(
        (result) => {
          this.setState({
            isLoaded: true,
            files: result.files
          });
        },
        (error) => {
          this.setState({
            isLoaded: true,
            error
          });
        }
      )
  }
  
  render() {  
    const { error, isLoaded, files } = this.state;
    if (error) {
      return <div>Error: {error.message}</div>;
    } else if (!isLoaded) {
      return <div>Loading...</div>;
    } else {
      return (     
        <ul>
          {files.map(file => (
            <li key={file.id}>
              {file.name} {file.age} {file.city}
            </li>
          ))}
        </ul>       
      );
    }
    
  }

}
export default Tab;

我收到一个类型错误:无法读取未定义的属性“地图”

我怎样才能解决这个问题?

提前致谢!

德鲁里斯

鉴于 API 响应是{"name":"John","age":26,"city":"London"}那么我建议如下:

  1. 将整个响应结果保存到 state 中。使用catch块来捕获任何错误并设置任何错误状态,并使用finally块来设置加载状态(更多DRY)。

    componentDidMount() {
      fetch("http://localhost/openims/json.php?function=getDocuments&input=")
        .then(res => res.json())
        .then((result) => {
          this.setState({ ...result });
        })
        .catch((error) => {
          this.setState({ error });
        })
        .finally(() => {
          this.setState({ isLoaded: true })
        });
    }
    
  2. 从状态渲染,没有数组,只有状态字段。

    render() {  
      const { error, isLoaded, name, age, city } = this.state;
    
      if (error) {
        return <div>Error: {error.message}</div>;
      } else if (!isLoaded) {
        return <div>Loading...</div>;
      } else {
        return (     
          <ul>
            <li>
              {name} {age} {city}
            </li>
          </ul>       
        );
      }
    }
    

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

使用React获取JSON对象数据

使用获取在React App中呈现JSON数据

React.js渲染JSON响应,共同获取或axios

使用tsx在React应用程序中进行条件渲染

在React中使用嵌套状态进行渲染优化

获取React State(对象的对象(内部示例))并获取对象数组到map()以进行组件渲染

使用React渲染JSON数据

如何使用React JS从JSON文件获取嵌套对象

使用react-mobx在异步获取上渲染

在React Native中使用false值进行条件渲染的问题

使用React进行API调用以获取并渲染数据

使用React Hooks多次获取数据axios-渲染数据

如何使用React-Table库获取Json

无法使用React Hook渲染从Firebase成功获取的数据集合

使用React从JSON获取一项

在React中使用Array中的数组进行循环渲染

如何在React渲染函数中从JSON对象获取值?

使用Rails中的React进行组件渲染不起作用

使用 Node/React 进行服务器端渲染。我如何获取数据?

使用 React.js 渲染 JSON

如何使用 react-native-dropdown 获取数据 JSON?

使用 react-testing-library 使用自定义渲染进行重新渲染

使用 JSON 数据进行 React-Native 条件渲染

无法使用 React 钩子访问获取的 Json 数据的对象属性

使用 React useEffect 获取数据和条件渲染

无法在 React.js 中使用 useState 进行渲染

在 REACT 中使用 fetch 获取外部 JSON 数据?

使用 React Three Fiber 获取渲染器信息

使用useEffect和componentDidMount从React中的Local Json获取