React native 如何在react中从json一个接一个地写入所有列表项？

我想在屏幕上显示从jsonplaceholder.com获取的名称。所有的名字都同时出现，但我希望名字像2sec一样一个接一个地出现。 我试过了，但没有成功

import React, { Component } from 'react'

export default class UserList extends Component {
state={users:[],loading:true}
componentDidMount() {
    setTimeout(() => {
        fetch('https://jsonplaceholder.typicode.com/users')
                .then(result => result.json())
                .then(jsonData =>this.setState({users:jsonData,loading:false}))
    }, 4000);
}

render() {
    
            <h1>USERS</h1>

            {this.state.loading && <h1>Loading..........</h1> }

            {this.state.users.length>0 && this.state.users.map(user=>
            setTimeout(() => {
                <div className="" key={user.id}>{user.name}</div>
            }, 3000)
                
             )}

        </div>
    )
}

import React，{Component}来自“React”
导出默认类UserList扩展组件{
状态={用户：[]，加载：true}
componentDidMount（）{
设置超时（（）=>{
取（'https://jsonplaceholder.typicode.com/users')
.then（result=>result.json（））
.then（jsonData=>this.setState（{users:jsonData，load:false}））
}, 4000);
}
render（）{
使用者
{this.state.loading&&loading………}
{this.state.users.length>0&&this.state.users.map（user=>
设置超时（（）=>{
{user.name}
}, 3000)
)}
)
}

---

}

您可以试试这个，您可以使用componentDidUpdate来更新索引

import React, { Component } from "react";

export default class UserList extends Component {
  state = { users: [], loading: true, indexes: [] };
  componentDidMount() {
    fetch("https://jsonplaceholder.typicode.com/users")
      .then((result) => result.json())
      .then((jsonData) => this.setState({ users: jsonData, loading: false }));
  }

  componentDidUpdate() {
    const { users, indexes } = this.state;

    if (indexes.length !== users.length) {
      setTimeout(() => {
        this.setState((prevState) => ({
          ...prevState,
          indexes: [...prevState.indexes, prevState.indexes.length]
        }));
      }, 2000);
    }
  }

  render() {
    const { users, indexes, loading } = this.state;

    return (
      <div>
        <h1>USERS</h1>

        {loading && <h1>Loading..........</h1>}

        {users.length > 0 &&
          indexes.length > 0 &&
          indexes.map((index) => <div>{users[index].name}</div>)}
      </div>
    );
  }
}

import React，{Component}来自“React”；
导出默认类UserList扩展组件{
state={users:[]，load:true，index:[]}；
componentDidMount（）{
取回（“https://jsonplaceholder.typicode.com/users")
.then（（result）=>result.json（））
.then（（jsonData）=>this.setState（{users:jsonData，load:false}））；
}
componentDidUpdate（）{
const{users，index}=this.state；
if（index.length！==users.length）{
设置超时（（）=>{
this.setState（（prevState）=>({
…国家，
索引：[…prevState.indexes，prevState.indexes.length]
}));
}, 2000);
}
}
render（）{
const{users，index，loading}=this.state；
返回(
使用者
{正在加载和正在加载………}
{users.length>0&&
索引长度>0&&
index.map（（index）=>{users[index].name}
);
}
}

---

但我强烈建议您使用钩子进行此类更新。

谢谢您，伙计。名称只显示一次，然后消失。如何在屏幕上显示所有名称。我的意思是名字会一个接一个地出现在屏幕上。@RidvanSaman我编辑了我的答案。你可以成为一个伟大的人。谢谢。