我的返回函数在 React 钩子中的函数中不起作用

Question

我的返回函数在函数内不起作用，请帮助我解决这个问题。

import React from 'react';
import axios from 'axios';
    const Category = () => {
        //const[data, useData]=useState([]);
        const FuncMen =() =>{
            var e = document.getElementById("menid");
            var country = e.options[e.selectedIndex].value;
            if(country === "T-shirt"){
                axios.post('http://localhost:8011/api/social/finddatamen',{country})
                .then((res) => {
                     var men = res.data.res.filter(filtereddata => filtereddata.category === "tshirt" ) 
                        console.log('selected value is',men);
                            men &&men.map((val,i)=>{
                            console.log("Tshirtt:",val.Tshirt,"Price:",val.price);
                            return(
                                <div key={i}>
                                    <h1>hello</h1>
                                  {val.Tshirt},
                                  {val.price}
                                  </div>
                            )
                        })

                        })
                    .catch((error) => {
                    console.log('error block called',error);
                })
            }

Answer 1

你需要在.catch之后返回 JSX (div， h1( 在 .then 块之外。

Answer 2

我不知道

为什么你在类别中嵌套了FuncMen。我会删除 FuncMen，如果你想使用钩子，我会使用这样的东西。

import React, {useState} from 'react';
import axios from 'axios';
const Category =() =>{
    const [category, setCategory] = useState(undefined)
    var e = document.getElementById("menid");
    var country = e.options[e.selectedIndex].value;
    if(country === "T-shirt"){
        axios.post('http://localhost:8011/api/social/finddatamen'{country})
            .then((res) => {
                var men = res.data.res.filter(filtereddatafiltereddata.category=== "tshirt" ) 
                console.log('selected value is',men);
                setCategory(men)
            .catch((error) => {
                console.log('error block called',error);
                        })
            }
    }
    return (
        <div>
            <h1>hello {category}</h1>
        </div>
        )
            )
}

然后在其他组件中，使用它：

render() {
    return (<Category />)