2021年3月27日星期六

React.js .map is not a function

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

没有评论:

发表评论