Question

我自己学习React。我有一些问题。我试图将数据提取到另一个组件。我在映射JSON数据后尝试setState。但它显示错误“setState is not a function”。

映射JSON数据后如何setState？

// Fetching data and passing JSON values to TabBarMenu component

export default class App extends Component {
    state = {
      temp: [],
      description: [],
      time: []
    };

_getFiveWeather = (lat, lng) => {    
    fetch(`http://api.openweathermap.org/data/2.5/forecast?lat=${lat}&lon=${lng}&APPID=${API_KEY}`)
        .then(response => response.json())
        .then(json => json.list.map(function(item) {
          return (
            <TabBarMenu key={item.dt_txt} time={item.dt_txt} description={item.weather.description} />
          );
        })
}}

在TabBarMenu.js中，我试图将props（时间，说明）传递给_FirstRoute。当我console.log(this.props),时，它显示空数组。

如何从构造函数中获取props值？

我非常感谢你的帮助。

import React, { Component } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { TabViewAnimated, TabBar, SceneMap } from 'react-native-tab-view';

export default class TabBarMenu extends Component {

  constructor(props) {
    super(props);
    console.log(this.props) // showing empty array

    this.state = {
      index: 0,
      routes: [
        { key: '1', title: 'Weather' },
        { key: '2', title: 'News' },
        { key: '3', title: 'Photos' },
      ],
    };
  }

  _FirstRoute = this.props => (
    <View style={styles.container}>
      <Text style={styles.textStyle}>1</Text>
      <Text style={styles.textStyle}>{this.props.description}</Text>
      <Text style={styles.textStyle}>{this.props.time}</Text>
      <Text style={styles.textStyle}>{this.props.temp}</Text>
    </View>
  )...

Answer 1

您的_getFiveWeather定义基本上没用，因为在获取数据之后，您实际上并没有对映射的组件做任何事情。你只是做地图操作然后就是这样 - 没有其他事情发生。

获取数据的方法应该只关注 - 获取数据;它应该与生成组件无关。您应该在获取后使用新数据设置状态。成功获取信息后的this.setState({ ... })之类的东西。

然后，在render()方法中，验证是否有任何要呈现的内容。也就是说，如果组件状态属性中存在任何天气信息，则可以执行某种映射以动态创建需要呈现的组件。

我在代码中没有看到render（）方法，所以我认为你应该专注于学习基础知识。从render（）开始。不要试图一次做太多事情。

道具显示空数组 - React Native

1 个答案: