Блог

Я пытаюсь отобразить рейтинг запроса в своем приложении React. Но я не уверен, что понимаю, как обращаться с государством.

Это мой компонент запроса:

 import React, { Component, useRef, useState, useEffect } from 'react';
import { render } from 'react-dom';
import InputSearchLandlord from './search'
import './style.css'
import SimpleRating from '../components/star_display'
import ReactStars from 'react-rating-stars-component'
import './style.css'

    
const HandleSearch = () => {
    const [ratingValue, setRating] = useState(0)
    const [name, searcName] = useState("")

    const nameForm = useRef(null)

    const average = arr => arr.reduce( ( p, c ) => p   c, 0 ) / arr.length;
    const ratings = []
    const displayComment = async() => {
        try {
            const form = nameForm.current
            const name = form['name'].value
            searchName(name)
            const response = await fetch(`localhost`)
            const jsonData = await response.json()
            getComments(jsonData)
            comments.forEach(e => {
                console.log(e.rating)
                ratings.push(e.rating)
            })
            const rating = average(ratings) //Avg of all rating associated with the search 
            console.log(rating)             //Should be pass to Rating component
            setRating(rating)
        } catch (error) {
            console.log(error.message)
        }
    }


    return(
        <div className="container">
        <div className="form-group">
        <h1 className="text-center mt-5">SEARCH</h1>
            <form ref={nameForm} className="mt-5">
                <InputSearch name={'name'}/>
                <div className="d-flex justify-content-center">
                    <button type="submit" className="d-flex btn btn-primary" onClick={displayComment}>Search</button>
                </div>
            </form>
            <div>
            <div className='container'>
                <h1>{name}</h1>
                <SimpleRating data={ratingValue}
                />
            </div>
            <div className='container'>
                {comments.map(comment => (
                    <div className="commentSection">
                         <a>
                            {comment.problem}
                        </a><br/>
                        <a>
                                Posted on : {comment.date}
                        </a>
                    </div>
                ))}
            </div>
            </div>
        </div>
        </div>
    )
}

export default HandleSearch;
 

И это моя составляющая рейтинга:

 import React, { useState } from 'react';
import { render } from 'react-dom';
import ReactStars from 'react-rating-stars-component'
import './style.css'
import HandleSearch from '../pages/handleSearch'


export default function SimpleRating(rating) {

  const [ratingValue, setRating] = useState(0)

  const options = {
    value: ratingValue, //Should use the value from the Search component
    a11y: true,
    isHalf: true,
    edit: false,
  };

  console.log(options.value)

  if (options.value == 0) return null //if rating value = 0 doesn't display the component

  return (
    <div className="starComponent">
      <ReactStars {...options}/>
    </div>
  );
}
 

Поэтому я пытаюсь передать значение, вычисленное в компоненте поиска, компоненту рейтинга. Перед выполнением любого запроса с помощью компонента поиска значение должно быть равно 0 и скрыто.

Что я упускаю ?

Это связано с вашим реквизитом. В родительском компоненте вы создаете реквизит под названием данные, поэтому в компоненте рейтинга вам нужно извлечь это значение из реквизита

 
//  HandleSearch Component
<SimpleRating data={ratingValue}

export default function SimpleRating(props) {
  const { data } = props
  // You can also just say props.data 

  ... rest of your component
}

 

В настоящее время вы фактически определяете реквизиты в своем компоненте упрощения, но вы называете их рейтингом (на самом деле не имеет значения, как вы его называете, но обычно его называют реквизитами), и это объект, содержащий все реквизиты, которые вы передаете в этот компонент.