Me gustaría ordenar tres publicaciones mejor calificadas. La función actual de mostrar tres títulos de publicaciones y su calificación, pero no puedo ordenarlos por mejor calificación. Por favor ayuda.
{posts.slice(0, 3).map((p)=> ( <p className='bestTitle'>{p.title} {p.ratings && ((p.ratings.reduce(function(prev, current) {return prev + current.rating}, 0)/(20 * p.ratings.length)).toFixed(2)) }</p> ))}Las publicaciones se verán así:
{ posts: { title: "abc", ratings: username: "abc", rating: 60 } }Suponiendo que las publicaciones son una matriz, puede usar la ordenación de matriz de javascript.
Pero primero, para facilitar el trabajo, podemos preprocesar las publicaciones por separado agregando/ averageRating un campo de calificación promedio en cada publicación.
Después de eso, podemos ordenarlo y luego puede usarlo donde sea necesario.
const posts = [{ title: "a", ratings: [{ username: "dave", rating: 10 }] }, { title: "b", ratings: [{ username: "cam", rating: 5 }, { username: "lil", rating: 50 } ] }, { title: "c", ratings: [{ username: "az", rating: 70 }] } ]; // Process each post to store its average rating on the object // This makes it easier for sorting. averageRatingPosts = posts.map((post) => ({ ...post, averageRating: post.ratings.reduce((prev, current) => prev + current.rating, 0) / (20 * post.ratings.length) })); // Sort by descending order/best average ratings on a scale of 1-5 averageRatingPosts.sort((postA, postB) => postB.averageRating - postA.averageRating); // Posts are now sorted by descending order of their average ratings. console.log(averageRatingPosts);No recomiendo hacer la clasificación en la función de renderizado.
(Porque tiene que calcular la tarifa general para cada publicación).
En cambio, primero puede calcular las calificaciones y ordenarlas. luego muéstrelos en el render.
const [topPosts, setTopPosts] = useState([]); useEffect(() => { // copy posts let posts_ = JSON.parse(JSON.stringify(posts)); posts_.forEach(post => { post.rate = post.ratings && parseFloat((post.ratings.reduce( (prev, current) => prev + current.rating, 0) / (20 * post.ratings.length)).toFixed(2)) }) posts_.sort((a, b) => b.rate - a.rate) posts_ = posts_.slice(0, 3); setTopPosts(posts_); }, [posts]) return <div> {topPosts.map((p)=> ( <p className='bestTitle'>{p.title} {p.rate || ''}</p> ))} </div>