I am requesting data from an express server I built and pushing it to react frontend. The data is sneaker data in an array. Problem is I can't map through it without getting the error sneaker.map is not a function... what am I doing wrong here?
goat: Array(25) 0: {sizing: 4, pricing: 465} 1: {sizing: 4.5, pricing: 450} 2: {sizing: 5, pricing: 459} 3: {sizing: 5.5, pricing: 465} 4: {sizing: 6, pricing: 480} 5: {sizing: 6.5, pricing: 490} 6: {sizing: 7, pricing: 494} 7: {sizing: 7.5, pricing: 459} 8: {sizing: 8, pricing: 447} 9: {sizing: 8.5, pricing: 436} 10: {sizing: 9, pricing: 419} 11: {sizing: 9.5, pricing: 399} 12: {sizing: 10, pricing: 420} 13: {sizing: 10.5, pricing: 430} 14: {sizing: 11, pricing: 440} 15: {sizing: 11.5, pricing: 459} 16: {sizing: 12, pricing: 450} 17: {sizing: 12.5, pricing: 500} 18: {sizing: 13, pricing: 473} 19: {sizing: 13.5, pricing: 506} 20: {sizing: 14, pricing: 495} 21: {sizing: 14.5, pricing: 500} 22: {sizing: 15, pricing: 556} 23: {sizing: 16, pricing: 495} 24: {sizing: 17, pricing: 495}
Here is a react code
function Market() { const [search, SetSearch] = useState(""); const [sneaker, SetSneaker] = useState({}); const HandleSearch = (e) => { e.preventDefault(); SendData(search); }; const SendData = async (query) => { axios.post("/api/sneaker", { query }).then((res) => { SetSneaker(res.data); }); }; useEffect(() => { SendData(); }, []); return ( <div className='wrapper'> <SneakerSearch HandleSearch={HandleSearch} search={search} SetSearch={SetSearch} /> {sneaker.map((item) => ( <div key={item.id}>{item.goat.sizes}</div> ))} </div> ); } export default Market;
It uses another component to collect input data which is then posted to server and sent back as response which is stored in useState()
https://stackoverflow.com/questions/66838102/react-js-map-is-not-a-function March 28, 2021 at 11:16AM
没有评论:
发表评论