使用 React 获取 API 数据

Question

所以我正在尝试从我的 API 获取数据并且我能够将它登录到控制台，但我无法使用 useState 将它呈现到我的应用程序中。试过类似的东西，它完全忽略了我的 h2。

var id = "61bf209bdb079818ec63d9fd";

const Main = () => {
    const [name, setName] = useState("");
    const [fromApi, setFromApi] = useState([]);
    
    const getApiData = () => {
        fetch('http://localhost:3000/myapi')
            .then(res => {
                return res.json();
            })
            .then(data => {
                console.log(data);
                setFromApi(data);
            })
        
        for (var i = 0; i < fromApi.length; i++) {
            if (fromApi[i]._id === id) {
                setName(fromApi[i].name);
            }
        }
    }

    useEffect(() => {
        getApiData();
    }, [])
    
    return (
        <div>
            {name && <h2 className='urname'>Your name: {name}</h2>}
        </div>
    )
}

Answer 1

这是因为 React 不保证立即应用状态更改。这使得更新后立即读取状态（在您的情况下为 setFromApi）成为一个潜在的陷阱，并且由于异步性质，可能 return 现有值。

调用 setState only affects the next render 并且不会更改已经运行代码中的状态

反应文档：https://reactjs.org/docs/react-component.html?#setstate

在您的情况下，您甚至在 fromAPI 状态更新之前就使用从 API 和运行 for 循环接收的数据。而是将 fromAPI 放在 useEffect 的依赖数组中，然后在那里执行 for 循环。

var id = "61bf209bdb079818ec63d9fd";

const Main = () => {
    const [name, setName] = useState("");
    const [fromApi, setFromApi] = useState([]);
    
    const getApiData = () => {
        fetch('http://localhost:3000/myapi')
            .then(res => {
                return res.json();
            })
            .then(data => {
                console.log(data);
                setFromApi(data);
            })
    }

    useEffect(() => {
        getApiData();
    }, [])

    useEffect(() => {
      if(fromApi?.length){
        for (var i = 0; i < fromApi.length; i++) {
            if (fromApi[i]._id === id) {
                setName(fromApi[i].name);
            }
        }
      }
    }, [fromApi])
    
    return (
        <div>
            {name && <h2 className='urname'>Your name: {name}</h2>}
        </div>
    )
}

Answer 2

我会考虑你为什么有fromApi和name两种状态？一旦数据从 API 返回，您就可以 setName...类似：

    const [name, setName] = useState("");
    
    const getApiData = () => {
        fetch('http://localhost:3000/myapi')
            .then(res => {
                return res.json();
            })
            .then(data => {
                console.log(data);
                for (var i = 0; i < data.length; i++) {
                    if (data[i]._id === id) {
                        setName(data[i].name);
                        // Stop the for loop once match has been found
                        return;
                    }
                }
            })
    }

使用 React 获取 API 数据

Fetching API data with React

fetch

reactjs