使用 useState 反应钩子更新对象数组

Question

我正在使用 React Hooks 开发一个简单的项目，我想通过从 API http://geoplugin.net/json.gp 获取的数据更新状态。但是，当我尝试更新状态时，它不起作用。只返回初始状态。

 import React, { Fragment,useState,useEffect } from 'react';
 import {container,Row,Table} from 'reactstrap';
 import axios from 'axios';

function LiveVisitors() {
 const [visitors,setVisitors] =useState([{
     ip: '',
             countryCode: '',
             city: '',
             state: '',
             country: ''
 }]);
const {ip,countryCode,city,state,country} = visitors;

 useEffect(()=>{
     getUserData()
 },[])
 //get user data
 const getUserData = () =>{

 const  res=  axios.get(`http://geoplugin.net/json.gp`).then(res =>{
    // console.log(res)
     const {geoplugin_request,
                     geoplugin_countryCode,
                     geoplugin_countryName,
                     geoplugin_city,
                     geoplugin_region
     
                 } =res.data;
     const visitor = {
         ip: geoplugin_request,
         countryCode: geoplugin_countryCode,
         city: geoplugin_city,
         state: geoplugin_region,
         country: geoplugin_countryName
                 };
     setVisitors(visitors => [...visitors,visitor])
     console.log(res.data)
     console.log({visitor})
     console.log(visitors)
 }).catch (err =>{
     console.log(err)
 })  
     
 }

Answer 1

通过使用 useEffect 和最后一个空数组，你强制它只运行一次

试试

useEffect(()=>{
     getUserData()
},[visitors]);

或者没有数组

useEffect(()=>{
     getUserData()
});

它应该在每次 React 检测到更改时触发，希望对您有所帮助。

这是一个非常好的article，它给出了很好的解释。

Answer 2

当您删除破坏 setState 的 axios 部分时，您的代码有效。我为您准备了一个示例，该示例有效并添加了另一个访问者元素。

https://codesandbox.io/s/react-playground-forked-hqswi?file=/index.js

import React, { Fragment, useState, useEffect } from "react";
import ReactDOM from "react-dom";

function LiveVisitors() {
  const [visitors, setVisitors] = useState([
    {
      ip: "",
      countryCode: "",
      city: "Warsaw",
      state: "",
      country: "Poland"
    },
    {
      ip: "",
      countryCode: "",
      city: "Gdańsk",
      state: "",
      country: "Poland"
    }
  ]);
  const { ip, countryCode, city, state, country } = visitors;

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

  const getUserData = () => {
    //imitate fetch
    setVisitors([
      ...visitors,
      {
    ip: "",
    countryCode: "",
    city: "Wrocław",
    state: "",
    country: "Poland"
      }
    ]);
  };

  return (
    <div>
      {visitors.map((el) => (
    <div>{el.city}</div>
      ))}
    </div>
  );
}

const wrapper = document.getElementById("container");
ReactDOM.render(<LiveVisitors />, wrapper);