building a rating app using strapi and react throws errors-CodePudding

I'm new to React and Strapi.

I've followed a tutorial here:

https://strapi.io/blog/build-a-rating-app-with-react-and-strapi

the strapi admin panel is installed and i have set up the required fields.

However running the app gives errors:

Uncaught (in promise) AxiosError 
{message: 'Request failed with status code 404', name: 'AxiosError', 
code: 'ERR_BAD_REQUEST', config: {…}, request: XMLHttpRequest, …}

the api request file (src/api/index.js) looks like this:

import axios from 'axios';
const url = 'http://localhost:1337/reviews';
export const readReviews = () => axios.get(url);
export const createReview = (newReview) => axios.post(url, newReview);

and the App.js file is as follows:

import React, { useState, useEffect } from 'react';
import * as api from './api';

import './styles/reviews.css';
import { FaStar } from 'react-icons/fa';
const colors = {
    orange: '#FFBA5A',
    grey: '#a9a9a9',
};

function App() {
    const stars = Array(5).fill(0);
    const [currentValue, setCurrentValue] = React.useState(0);
    const [hoverValue, setHoverValue] = React.useState(undefined);

    const handleClick = (value) => {
        setCurrentValue(value);
    };

    const handleMouseOver = (value) => {
        setHoverValue(value);
    };

    const [review, setReview] = useState({});
    const [reviews, setReviews] = useState([]);
    useEffect(() => {
        const fetchData = async () => {
            const result = await api.readReviews();
            //console.log(result);
            setReviews(result.data);
        };
        fetchData();
    }, []);
    const createReview = async () => {
        try {
            //console.log(review);
            const data = await api.createReview(review);
            setReview([...reviews, data]);
        } catch (error) {
            //console.log(error);
        }
    };
    let [reviewCount, setreviewCount] = useState([]);
    const setCountFxn = (no) => {
        setReview(no);
    };
    return (
        <>
            <form>
                <div style={styles.container}>
                    <h2>RATE OUR SERVICE</h2>

                    <div style={styles.stars}>
                        {stars.map((_, index) => {
                            return (
                                <FaStar
                                    key={index}
                                    size={24}
                                    style={{
                                        marginRight: 10,
                                        cursor: 'pointer',
                                    }}
                                    color={(hoverValue || currentValue) > index ? colors.orange : colors.grey}
                                    onClick={() => {
                                        setReview({ ...review, Rating: index   1 });
                                    }}
                                    onm ouseOver={() => handleMouseOver(index   1)}
                                />
                            );
                        })}
                    </div>
                    <div>
                        <input
                            type='text'
                            placeholder='input your name'
                            required
                            style={styles.input}
                            value={review.Name}
                            onChange={(e) => setReview({ ...review, Name: e.target.value })}
                        />
                    </div>

                    <textarea
                        placeholder="what's your feedback"
                        required
                        style={styles.textarea}
                        value={review.review}
                        onChange={(e) => setReview({ ...review, review: e.target.value })}
                    />
                    <button type='submit' style={styles.button} className='btn btn-primary' onClick={createReview}>
                        submit
                    </button>
                </div>
            </form>

            <section id='reviews'>
                <div className='reviews-heading'>
                    <span>REVIEWS FROM CUSTOMERS</span>
                </div>

                <div className='container'>
                    <div className='row'>
                        {reviews.map(
                            (
                                review,
                                i // calling the api
                            ) => (
                                <div className='col-md-6'>
                                    <div className='reviews-box'>
                                        <div className='box-top'>
                                            <div className='profile'>
                                                <div className='name-user'>
                                                    <strong>{review.Name}</strong>
                                                </div>
                                            </div>

                                            <div style={styles.stars}>
                                                {Array.from({ length: review.Rating }).map((i) => (
                                                    <FaStar key={i} size={18} color={colors.orange} />
                                                ))}
                                            </div>
                                        </div>

                                        <div className='client-comment'>{review.review}</div>
                                    </div>
                                </div>
                            )
                        )}
                    </div>
                </div>
            </section>
        </>
    );
}

const styles = {
    container: {
        align: 'center',
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        boxShadow: '0 0 20px 0 #999',
        width: '30%',
        margin: '50px auto',
    },
    input: {
        borderRaduis: 5,
        width: 300,
        margin: '10px 0',
        marginDown: '15px',
        minHeight: 30,
        padding: 1,
        height: '20px',
    },
    textarea: {
        border: '1px solid #a9a9a9',
        borderRaduis: 5,
        width: 300,
        margin: '20px 0',
        minHeight: 100,
        padding: 10,
    },

    button: {
        border: '1px solid #a9a9a9',
        borderRaduis: 5,
        width: 300,
        padding: 10,
        margin: '20px 0',
    },
};
export default App;

There is no way of contacting the author of the tutorial.

In Postman app when running a get request from this url

http://localhost:1337/reviews

brings no results

When I change the url to http://localhost:1337/api/reviews

then I get the results.

However, when I change this url in the api/index.js and run the app in the browser, the following errors occur:

*Uncaught TypeError: reviews.map is not a function

 at App (App.js:102:1)
    at renderWithHooks (react-dom.development.js:16305:1)
    at updateFunctionComponent (react-dom.development.js:19588:1)
    at beginWork (react-dom.development.js:21601:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)
    at invokeGuardedCallback (react-dom.development.js:4277:1)
    at beginWork$1 (react-dom.development.js:27451:1)
    at performUnitOfWork (react-dom.development.js:26557:1)
    at workLoopSync (react-dom.development.js:26466:1)
App @ App.js:102
renderWithHooks @ react-dom.development.js:16305
updateFunctionComponent @ react-dom.development.js:19588
beginWork @ react-dom.development.js:21601
callCallback @ react-dom.development.js:4164
invokeGuardedCallbackDev @ react-dom.development.js:4213
invokeGuardedCallback @ react-dom.development.js:4277
beginWork$1 @ react-dom.development.js:27451
performUnitOfWork @ react-dom.development.js:26557
workLoopSync @ react-dom.development.js:26466
renderRootSync @ react-dom.development.js:26434
performSyncWorkOnRoot @ react-dom.development.js:26085
flushSyncCallbacks @ react-dom.development.js:12042
flushSyncCallbacksOnlyInLegacyMode @ react-dom.development.js:12021
scheduleUpdateOnFiber @ react-dom.development.js:25541
dispatchSetState @ react-dom.development.js:17527
fetchData @ App.js:30
await in fetchData (async)
(anonymous) @ App.js:32
commitHookEffectListMount @ react-dom.development.js:23150
commitPassiveMountOnFiber @ react-dom.development.js:24926
commitPassiveMountEffects_complete @ react-dom.development.js:24891
commitPassiveMountEffects_begin @ react-dom.development.js:24878
commitPassiveMountEffects @ react-dom.development.js:24866
flushPassiveEffectsImpl @ react-dom.development.js:27039
flushPassiveEffects @ react-dom.development.js:26984
(anonymous) @ react-dom.development.js:26769
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533*

Can any one advise?

Thanks

Nabi

CodePudding user response：

update set like this setReviews(result.data.data)

And to avoid key prop warning, add a key attribute

      {reviews.map(
             (review,i) => (
                  <div key={review.id} className='col-md-6'>

CodePudding user response：

[https://stackoverflow.com/users/6428638/sachila-ranawaka]

thank you! thats solved the issue.