使用strapi构建评等应用程序并反应抛出错误
使用strapi构建评等应用程序并反应抛出错误
提问于 2022-11-18 14:07:40
我是新来的反应和斯特拉皮。
我在这里学习了一个教程：
https://strapi.io/blog/build-a-rating-app-with-react-and-strapi
安装了strapi管理面板，我已经设置了所需的字段。
然而，运行该应用程序会产生错误：
Uncaught (in promise) AxiosError
{message: 'Request failed with status code 404', name: 'AxiosError',
code: 'ERR_BAD_REQUEST', config: {…}, request: XMLHttpRequest, …}api请求文件(src/api/index.js)如下所示：
import axios from 'axios';
const url = 'http://localhost:1337/reviews';
export const readReviews = () => axios.get(url);
export const createReview = (newReview) => axios.post(url, newReview);App.js文件如下：
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 });
}}
onMouseOver={() => 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;没有办法联系到本教程的作者。
当从这个url运行get请求时，在Postman应用程序中
不会带来任何结果
当我将url更改为http://localhost:1337/api/reviews时
那我就知道结果了。
但是，当我在api/index.js中更改这个url并在浏览器中运行该应用程序时，会出现以下错误：
*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*有人能给我建议吗？
谢谢
纳比
回答 1
Stack Overflow用户
回答已采纳
发布于 2022-11-18 15:01:09
像这个setReviews(result.data.data)一样的更新集
为了避免键道具警告，添加一个key属性
{reviews.map(
(review,i) => (
<div key={review.id} className='col-md-6'>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/74490898
复制相关文章
相似问题
腾讯云开发者
