Fetching Details From API 并根据条件设置状态 - 功能组件

Question

我有一个名为 Calendar 的功能组件，其中每个月都是一个按钮。我设计的API发送数据格式如下：

[
    { 
        "month": 1,
        "count": 5
    },
    {
       "month": 3,
       "count": 2
    },
    {
        "month": 10,
        "count": 4
    },
    {
        "month": 11,
        "count": 3
    }
]

现在我有以下状态：

    const [jan, setJan] = useState(0);
    const [feb, setFeb] = useState(0);
    const [mar, setMar] = useState(0);
    const [apr, setApr] = useState(0);
    const [may, setMay] = useState(0);
    const [june, setJune] = useState(0);
    const [july, setJuly] = useState(0);
    const [aug, setAug] = useState(0);
    const [sept, setSept] = useState(0);
    const [oct, setOct] = useState(0);
    const [nov, setNov] = useState(0);
    const [dec, setDec] = useState(0);
    const [month, setMonth] = useState([]);

使用useEffect，我设置了月份并将数据存储在月份状态，但是当我使用console.log(month)时它显示一个空数组，

 useEffect(() => {
    axios.get("http://localhost:8081/api/CalendarNotification/1234")
        .then(res => {
            setMonth(res.data)
        })
        .catch(err => { console.log(err) })

}, []);

现在我已经使用下面的代码，根据从 api.

接收到的数据中的“月份”设置每个月的状态

{
                (month.map(mon => {
                if (mon["month"] === 1)
                    setJan(mon["count"]);
                else if (mon["month"] === 2)
                    setFeb(mon["count"]);
                else if (mon["month"] === 3)
                    setMar(mon["count"]);
                else if (mon["month"] === 4)
                    setApr(mon["count"]);
                else if (mon["month"] === 5)
                    setMay(mon["count"]);
                else if (mon["month"] === 6)
                    setJune(mon["count"]);
                else if (mon["month"] === 7)
                    setJuly(mon["count"]);
                else if (mon["month"] === 8)
                    setAug(mon["count"]);
                else if (mon["month"] === 9)
                    setSept(mon["count"]);
                else if (mon["month"] === 10)
                    setOct(mon["count"]);
                else if (mon["month"] === 11)
                    setNov(mon["count"]);
                else if (mon["month"] === 12)
                    setDec(mon["count"]);

            }
            ))}

另外，代码写在哪，在useEffect或者return方法中，请告诉我！

但是没有任何效果，有人可以帮忙解决这个问题吗？提前致谢！ :)

Answer 1

通常您必须尝试在 useEffect 中更新您的个人月份。您还需要使用 forEach 函数来执行此类操作。 map 函数的目的是 return something 。这样的东西应该可以工作

useEffect(() => {
    month.forEach(mon => {
       // UPDATE YOUR INDIVIDUAL MONTHS HERE
    })
},[ month ])

Fetching Details From API 并根据条件设置状态 - 功能组件

Fetching Details From API and setting state according to conditions - Functional Components

reactjs

api

react-hooks

api-design

use-effect