Javascript 如何从fetchapi获取特定数据

我正在尝试从我的React原生应用程序的

标记中的api获取并显示特定数据。 我要做的是显示api中第二个对象的名称

这是我的密码：

class HomeSreen extends Component {
 constructor(props) {
   super(props);
   this.state = {
     dataSource: [],
   };
 }
 componentDidMount() {
   const request = new Request('http://jsonplaceholder.typicode.com/users');

   fetch(request)
     .then(response => response.json())
     .then(responseJson => {
       this.setState({
         dataSource: responseJson,
       });
     });
 }
 render() {
   return (
     <View>
       <Text>Home Screen</Text>
       <Text>{this.state.dataSource[1].name}</Text>
     </View>
   );
 }
}

但是我不能得到我需要的数据。

---

如果有任何帮助，我们将不胜感激

这些数据请求是异步的，因此当第一次渲染发生时，API不会返回任何数据

class HomeSreen extends Component {
 constructor(props) {
   super(props);
   this.state = {
     dataSource: [],
   };
 }

 componentDidMount() {
   const request = new Request('http://jsonplaceholder.typicode.com/users');

   fetch(request)
     .then(response => response.json())
     .then(responseJson => {
       this.setState({
         dataSource: responseJson,
       });
     });
 }

 render() {
   return (
     <View>
       <Text>Home Screen</Text>
       {
         this.state.dataSource.length === 0 ?
           <Text>Waiting moment.</Text> :
           <Text>{this.state.dataSource[1].name}</Text>
       }

     </View>
   );
 }
}

类HomeScreen扩展组件{
建造师（道具）{
超级（道具）；
此.state={
数据源：[]，
};
}
componentDidMount（）{
const request=新请求（'http://jsonplaceholder.typicode.com/users');
提取（请求）
.then（response=>response.json（））
.然后（responseJson=>{
这是我的国家({
数据来源：responseJson，
});
});
}
render（）{
返回(
主屏幕
{
this.state.dataSource.length==0？
等待时间：
{this.state.dataSource[1].name}
}
);
}
}

---

进行这些更改后，您可以可视化所需的数据。

如果问题是您的组件在请求完成后没有更新该属性，那是因为您正在

数据源

数组上执行“浅层合并”，因此React无法检测到数据的更改。有几种方法可以处理此问题：

深合并

将

name

属性拉出到组件状态的顶层

类HomeScreen扩展组件{
建造师（道具）{
超级（道具）；
此.state={
数据源：[]，
电影名称
};
}
componentDidMount（）{
const request=新请求（'http://jsonplaceholder.typicode.com/users');
提取（请求）
.then（response=>response.json（））
.然后（responseJson=>{
这是我的国家({
屏幕标题：responseJson[1]。姓名，
});
});
}
render（）{
返回(
主屏幕
{this.state.screenTitle}
);
}
}

替换为

this.state.dataSource.length>0？this.state.dataSource[1]。名称：“加载数据”

，在

class HomeSreen extends Component {
 constructor(props) {
   super(props);
   this.state = {
     dataSource: [],
   };
 }

 componentDidMount() {
   const request = new Request('http://jsonplaceholder.typicode.com/users');

   fetch(request)
     .then(response => response.json())
     .then(responseJson => {
       this.setState({
         dataSource: responseJson,
       });
     });
 }

 render() {
   return (
     <View>
       <Text>Home Screen</Text>
       {
         this.state.dataSource.length === 0 ?
           <Text>Waiting moment.</Text> :
           <Text>{this.state.dataSource[1].name}</Text>
       }

     </View>
   );
 }
}

fetch(request)
    .then(response => response.json())
    .then(responseJson => {
      this.setState(prevState => {
        return {
          ...prevState.dataSource,
          dataSource: responseJson.map((obj, i)=>{ return {...dataSource[i], ...obj}},
        }
      });
    });

class HomeSreen extends Component {
 constructor(props) {
   super(props);
   this.state = {
     dataSource: [],
     screenTitle
   };
 }
 componentDidMount() {
   const request = new Request('http://jsonplaceholder.typicode.com/users');

   fetch(request)
     .then(response => response.json())
     .then(responseJson => {
       this.setState({
         screenTitle: responseJson[1].name,
       });
     });
 }
 render() {
   return (
     <View>
       <Text>Home Screen</Text>
       <Text>{this.state.screenTitle}</Text>
     </View>
   );
 }
}