根据下拉列表从2个API和setState获取详细信息-React Functional Components

如何解决根据下拉列表从2个API和setState获取详细信息-React Functional Components

我有一个名为Calendar的功能组件，其中每个月都是一个Button。我设计了两个API：

第一次加载时，第一个从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([]);
        const cleanup = () =>{
                 setJan(0);
                 setFeb(0);
                 setMar(0);
                 setApr(0);
                 setMay(0);
                 setJune(0);
                 setJuly(0);
                 setAug(0);
                 setSept(0);
                 setOct(0);
                 setNov(0);
                 setDec(0);
}
    const [month,setMonth] = useState([]);
    const [name,setName] = useState("");

每个月的状态应根据下拉菜单进行更改，如果我选择一个学生说Rani，则应显示她每个月的总成绩，如果选择Ramu，则应在按钮上显示他的成绩。现在，我有2种不同的API，如果没有选择名称，则默认api会获取信息，否则，具有学生名的另一个api会根据所选学生获取信息。

假设，我从下拉列表中选择Rani，并根据以下给出的API输出：

[
    {
        "month": 11,"count": 1
    }
]

只有“十一月”按钮应显示为1，其余部分为0。如果我在下拉菜单中没有选择任何内容，则默认API应该可以使用。我设计了以下代码，它显示了正确加载时的通知数量，但是，一旦我更改了名称并且再次没有选择任何内容，它就一直显示为0。下面是相同的useEffect代码。

  useEffect(() => {
    if(name!=""){
        cleanup();
        axios.get("http://localhost:8081/api/teacherportal/1234/${name}")
            .then(res => {
                setMonth(res.data)
                month.forEach(mon => {
                    {
                        (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"]);

                        }
                        ))
                    }
                })
            })
            .catch(err => { console.log(err) })
        }
    else{
       
     axios.get("http://localhost:8081/api/teacherportal/1234")
        .then(res => {
            setMonth(res.data)
            month.forEach(mon => {
                {
                    (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"]);

                    }
                    ))
                }
            })
        })
        .catch(err => { console.log(err) })
    }
},[month,name]);

下面是下拉式onChange处理程序：

const handleChange = (event) => {

        setCustomer(event.target.value);
        if (event.target.value === "Rani") {
            setName("Rani");
        }
        else if (event.target.value === "Ramu") {
            setName("Ramu");
        }
        else if (event.target.value === "Lalu") {
            setName("Lalu");
        }
    }

如果我从下拉列表中选择该学生，并且该学生某个月没有任何数据，则从默认api获取的数据将被覆盖，而不是显示0，因此是清除功能。有人可以帮忙吗，提前谢谢：）

解决方法

我认为问题在于您是同一函数中的setMonth和month变量。 setMonth不会直接更新month变量，但是会在下一个渲染调用中进行更新。

要解决您的问题，请在两次通话中都收到数据后绕过setMonth：

axios.get("http://localhost:8081/api/teacherportal/1234/${name}")
            .then(res => {
                res.data.forEach(mon => {

尽管此代码可能有效，但可以大大简化。

将您的月份数据存储在单个useState中使它更易于阅读，并且意味着不再需要从月份（数字）到setState函数的映射。

// array with 12 entries
const [months,setMonths] = useState(Array(12).fill(0));

// jan = months[0];
// feb = months[1];
// ...

在您的useEffect挂钩中，用于处理API响应的代码是相同的。您可以删除很多代码（并从上方使用单个useState），使其看起来像这样：

useEffect(() => {
  const getData = async () => {
    if (name !== '') {
      return axios.get('http://localhost:8081/api/teacherportal/1234/${name}');
    }

    return axios.get('http://localhost:8081/api/teacherportal/1234');
  };

  getData()
    .then(({ data }) => {
      // start with empty months data (same as `cleanup()`)
      const monthsData = Array(12).fill(0);

      // populate the new array with your API data
      data.forEach(entry => {
        // the API returns the month starting from 1,while the array index starts from 0.
        monthsData[entry.month - 1] = entry.count;
      });

      setMonths(monthsData);
    })
    .catch(error => {
      console.log('Failed to get data',error)
    });
},[name]);

最后，handleChange函数可以简化为：

const handleChange = (event) => {
  setCustomer(event.target.value);
  setName(event.target.value);
}

根据下拉列表从2个API和setState获取详细信息-React Functional Components

如何解决根据下拉列表从2个API和setState获取详细信息-React Functional Components

解决方法

相关推荐