मैं इस एपीआई से डेटा लाने की कोशिश कर रहा हूँ https://randomuser.me/api/?results= 25 इस कोड के साथ

function Users() {
 const [Users, setUsers] = useState([])
    useEffect(() => {
        axios.get('https://randomuser.me/api/?results=25')
        .then(Response=>{
            if(Response.data){
                alert("FOund")
                setUsers([Response.data])
                

            }else{
                alert("not found")
            }
        })
    }, [])
    const displaylist = Users.map((User,index)=>{
        return(
        <h3>{User.gender}</h3>
        )
    })
    
    return (
        <div>
            {displaylist}
        </div>
    )
}

export default Users

लेकिन कुछ भी नहीं दिख रहा है और कंसोल यह त्रुटि दे रहा है: चेतावनी: सूची में प्रत्येक बच्चे के पास एक अद्वितीय "कुंजी" प्रोप होना चाहिए।

Users की रेंडर विधि जांचें। अधिक जानकारी के लिए https://reactjs.org/link/warning-keys देखें। h3 . पर उपयोगकर्ताओं पर (http://localhost:3000/static/js/main.chunk.js:627:83) डिवो में App . पर

1
Faraz Anwer 24 अक्टूबर 2020, 17:36

2 जवाब

सबसे बढ़िया उत्तर

enter image description here

Json परिणाम का उपयोग गलत है, `

  if (Response.result) {
    alert("FOund");
    setUsers(Response.result);
  } else {
    alert("not found");
  }`
-1
nassim miled 24 अक्टूबर 2020, 17:58

जब आप एक सरणी के माध्यम से मैप करते हैं तो प्रतिक्रिया को एक अद्वितीय कुंजी की आवश्यकता होती है, जैसे User.id; इस मामले में आप इंडेक्स का भी इस्तेमाल कर सकते हैं। मैंने आपके कार्य को इस तरह थोड़ा बदल दिया:

function Users() {
  const [Users, setUsers] = useState([]);
  useEffect(() => {
    axios.get("https://randomuser.me/api/?results=25").then((Response) => {
      if (Response.data) {
        alert("FOund");
        setUsers(Response.data.results);
      } else {
        alert("not found");
      }
    }).catch(error => console.log(error));
  }, []);
  const displaylist = Users.map((User, index) => {
    return <h3 key={index}>{User.gender}</h3>;
  });

  return <div>{displaylist}</div>;
}

export default Users;
1
Alex Yepes 24 अक्टूबर 2020, 18:14