开发者问题收集

使用 useState React Native 将获取的数据传递给组件

2020-02-17
1712
javascript react-native react-hooks fetch-api use-state

我是 React Native 的新手。实际上这是我的第一个应用程序。

我一直试图将数据从 Fetch 传递到组件，但没有成功。我在 Google 上上下下、左顾右盼，尝试了无数种方法，但仍然没有成功。

这是我的 App.js 

import React, {useState, useEffect} from 'react';
import { View, StyleSheet, ScrollView } from 'react-native';

import Header from './parts/header';
// import BigNews from './parts/big-news';
import Index from './screens/index.js';

const authorization = { authorization: '1234aa' };

export default function App() {
  const [fetchApiData, setApiData] = useState();

  useEffect(() =>
  fetch('https://example.com/get-app-home.php', {
    method: 'POST', // or 'PUT'
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(authorization),
  })
  .then(res => res.json())
  .then(res => {
    this.setState({ setApiData: res })
  })
  .catch(() => this.setState({ hasErrors: true }))
  );
  return (
    <View style={styles.viewport}>
      <Header />
      <ScrollView style={styles.contentHolder}>
        <Index content={fetchApiData}/>
      </ScrollView>
    </View>
);


}

这是我的 index.js 文件 

import React from 'react';
import { View, Text } from 'react-native';

import BigNews from '../parts/big-news';
import SmallNews from '../parts/small-news';
import Colors from '../constants/colors'

const Index = props => {

    return (
      <View>
        <BigNews
        image={props.content.first.image}
        pretitle={props.content.first.pretitle}
        title={props.content.first.title}
        introduction={props.content.first.introduction}
        style={{color: props.content.first.mark}}/>

        <SmallNews
        image={props.content.second.image}
        pretitle={props.content.second.pretitle}
        title={props.content.second.title}
        style={{color: props.content.first.mark}}/>

        <SmallNews
        image={props.content.second.image}
        pretitle={props.content.second.pretitle}
        title={props.content.second.title}
        style={{color: props.content.first.mark}}/>

        <SmallNews
        image={props.content.second.image}
        pretitle={props.content.second.pretitle}
        title={props.content.second.title}
        style={{color: props.content.first.mark}}/>
      </View>
    );
}
export default Index;

我不断收到 TypeError：undefined 不是对象（评估“props.content.first”）

我尝试了无数种方法，但大多数情况下我看到的错误都是这个。如果我对状态执行 console.log，我会得到 undefined 或空。

2个回答

在您的 索引 组件中， content prop最初是未定义的，因为您不将任何值（通常称为“初始状态”）转移到 usestate app component。用 第一个 和 第二个 项目填充了初始状态，因为试图进一步访问树下的元素（ image> image pretitle 等）仍然会丢失错误。

George
2020-02-17

您未设置数据 this.setState 适用于类组件。将 this.setState 替换为 setApiData() 。

useState 返回初始状态和用于更新该值的函数。 

const [ hasError, setHasErrors] = useState(false);

.then(res => res.json())
.then(res => {
  setApiData(res)
})
.catch(() => setHasErrors(true))
);

正如 George 指出的那样，初始状态设置为空，执行 props.content.first.image 将导致错误。将初始值设置为类似 

const [ fetchApiData, setApiData ] = useState({
   first: {},
   second: {}
});

的对象，或者验证组件中的值。 

const Index = props => {

  return (
   <View>
    <BigNews
    image={props && props.content && props.content.first && props.content.first.image}
    pretitle={props && props.content && props.content.pretitle && props.content.first.pretitle}
    title={props && props.content && props.content.title && props.content.first.title}
    introduction={props && props.content && props.content.introduction && props.content.first.introduction}
    style={{color: props && props.content && props.content.first && props.content.first.mark}}/>

    ...
  </View>
  );
}
export default Index;
Junius L
2020-02-17