предыдущий выпуск
создание рейтингового приложения с использованием страпи и реакции выдает ошибки решено.
Но записи не добавляются в админку.
может ли кто-нибудь помочь в этом?
Это код для добавления и чтения отзывов от администратора страпи,
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.info(result.data);
setReviews(result.data.data);
};
fetchData();
}, []);
const createReview = async () => {
try {
//console.info(review);
const data = await api.createReview(review);
setReview([...reviews, data]);
} catch (error) {
//console.info(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) => (
<div key = {review.id} className='col-md-6'>
<div className='reviews-box'>
<div className='box-top'>
<div className='profile'>
<div className='name-user'>
<strong>{review.attributes.Title}</strong>
</div>
</div>
<div style = {styles.stars}>
{Array.from({ length: review.attributes.Rating }).map((i) => (
<FaStar key = {i} size = {18} color = {colors.orange} />
))}
</div>
</div>
<div className='client-comment'>{review.attributes.Body}</div>
</div>
</div>
))}
</div>
</div>
</section>
</>
);
}
export default App;
Форма отправляется и перезагружается после отправки, но запись не добавляется в админку strapi. Я установил роли данных для общественности.
спасибо Наби
🤔 А знаете ли вы, что...
React поддерживает создание контролируемых и неконтролируемых компонентов форм.
Вам нужна очень специфическая структура, чтобы создать новую запись с помощью страпи. Я предполагаю, что ваша полезная нагрузка выглядит так:
{
name: 'xyz',
rating: 5
}
Правильно будет:
{
data: {
name: 'xyz',
rating: 5
}
}
Документы Strapi — Создание записи