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

我是个新来的本地人。实际上这是我的第一个应用

我一直在尝试将数据从Fetch传递到组件，但没有成功。我上下左右研究过谷歌，尝试过无数次，但仍然没有成功

这是我的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>
);


}

import React，{useState，useffect}来自“React”；
从“react native”导入{View，StyleSheet，ScrollView}；
从“./parts/Header”导入标题；
//从“./parts/big news”导入BigNews；
从“/screens/Index.js”导入索引；
const authorization={authorization:'1234aa'}；
导出默认函数App（）{
const[fetchApiData，setApiData]=useState（）；
useffect（（）=>
取（'https://example.com/get-app-home.php', {
方法：“POST'、//或“PUT”
标题：{
“内容类型”：“应用程序/json”，
},
正文：JSON.stringify（授权），
})
.then（res=>res.json（））
。然后（res=>{
this.setState（{setApiData:res}）
})
.catch（（）=>this.setState（{hasErrors:true}））
);
返回(
);
}

这是我的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;

从“React”导入React；
从“react native”导入{View，Text}；
从“../parts/big news”导入BigNews；
从“../parts/small news”导入SmallNews；
从“../constants/Colors”导入颜色
常量索引=道具=>{
返回(
);
}
出口违约指数；

---

我经常遇到TypeError：undefined不是一个对象（评估'props.content.first'）

---

我尝试了无数种方法，但大多数情况下，这是我看到的错误。如果我执行console.log的状态，我将得到未定义或为空。

您没有设置数据

此。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;

const Index=props=>{
返回(
...
);
}
出口违约指数；

您没有设置数据

此。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;

const Index=props=>{
返回(
...
);
}
出口违约指数；

在

索引

组件中，

内容

属性最初未定义，因为您没有将任何值（通常称为“初始状态”）传递给

应用程序

组件中的

使用状态

函数

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;

相反，请尝试：

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

---

请注意，我已经用

第一个

和

第二个

项填充了初始状态，因为尝试访问树下更远的元素（

图像

，

字幕

等）仍然会抛出错误。

在

索引

组件中，

内容

道具最初未定义，因为您没有将任何值（通常称为“初始状态”）传递给

应用程序

组件中的

useState

函数

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;

相反，请尝试：

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

---

请注意，我已经用

first

和

second

项填充了初始状态，因为尝试访问树下更远的元素（

image

，

pretitle

，等等）仍然会抛出错误。

@Korovjov请注意，尽管这不是导致错误的原因，TypeError:undefined不是对象（评估'props.content.first'）George关于状态的回答，正如您所指出的，是正确的。没问题。但是现在React抛出一个错误类型error destroy不是一个函数。我在谷歌上根本找不到这个错误。@Korovjov注意，虽然这不是你所得到的错误的原因，但它仍然是正确的。TypeError:undefined不是一个对象（评估'props.content.first'）George关于州的回答，正如你所指出的，是正确的。没问题。但是现在React抛出一个错误类型error destroy不是一个函数。我在谷歌上根本找不到这个错误。好吧，你解决了一个问题。现在我得到了错误：TypeError:destroy不是一个函数（在destroy（）中，destroy是Promise的一个实例）@Korovjov听起来像是另一个问题的原因。具体一点，这是具体的。这是错误的。没别的了。好的，我明白了，问题是FetchAPI中的异步等待。我必须创建异步函数。我有没有办法不用手动输入first、second等就可以实现这一点（你建议的first{}、second{}）。。。。我是说还有别的办法吗？好吧，你解决了一个问题。现在我得到了错误：TypeError:destroy不是一个函数（在destroy（）中，destroy是Promise的一个实例）@Korovjov听起来像是另一个问题的原因。具体一点，这是具体的。这是错误的。没别的了。好的，我明白了，问题是FetchAPI中的异步等待。我必须创建异步函数。我有没有办法不用手动输入first、second等就可以实现这一点（你建议的first{}、second{}）。。。。我是说还有别的办法吗？