Question

在我的React App中，我从api中获取数据并列出主页中的所有帖子，因此我的目的是创建一个功能，以星标为帖子评分。所以我正在绘制所有帖子，将帖子信息传递到Rate组件，并通过ratePost动作对帖子进行评分。

动作

export const ratePost = (rate, postId) => dispatch => {
    const config = {
        withCredentials: true
    }

    const sRate = parseInt(rate, 10)

    const body = JSON.stringify({ star_rate:sRate })

    axios.put(`http://127.0.0.1:8000/api/v1/p/rate/${postId}`, body, config)
        .then(res => {
            dispatch({
                type: RATE_POST,
                sRate,
                postId
            })
        }).catch(err => {
            console.log(err)
            dispatch({
                type: RATE_POST_FAIL
            })
        })
}

问题是，当我调度动作时，它总是发送相同的postId，而在控制台记录道具后，即使我给不同的帖子评分，它也显示相同的props。

在React DevTools组件部分中，它显示了多个Rate组件，它们的道具与预期的不同。（我剪切了代码中不相关的部分）

export function Card(props) {

    const { category } = useParams()
    
    useEffect(() => {
        if(!category){
            props.getPosts()
        } else {
            props.getPostsByCategory(category)
        }
    },[category])

    return (
        <Fragment>
            <div className="posts">
                {props.posts.map(post => 
                    <article key={post.id} id={post.id}>
                        <div className="post-meta">
                            <div className="stars">
                                <Rate post={post}/>
                            </div>
                        </div>
                    </article>
                )}
            </div>
        </Fragment>
    )
    
}

Rate.js

export function Rate(props) {

    const onInput = (e) => {
        props.ratePost(e.target.value, props.post.id)
        console.log(props.post) /* shows the same props */
    }

    return(
        <fieldset className="rating">
            <input type="radio" onInput={onInput} id="star5" name="rating" value="5" /><label className = "full" htmlFor="star5"></label>
            <input type="radio" onInput={onInput} id="star4half" name="rating" value="4.5" /><label className="half" htmlFor="star4half" ></label>
            <input type="radio" onInput={onInput} id="star4" name="rating" value="4" /><label className = "full" htmlFor="star4" ></label>
            <input type="radio" onInput={onInput} id="star3half" name="rating" value="3.5" /><label className="half" htmlFor="star3half" ></label>
            <input type="radio" onInput={onInput} id="star3" name="rating" value="3" /><label className = "full" htmlFor="star3" ></label>
            <input type="radio" onInput={onInput} id="star2half" name="rating" value="2.5" /><label className="half" htmlFor="star2half" ></label>
            <input type="radio" onInput={onInput} id="star2" name="rating" value="2" /><label className = "full" htmlFor="star2" ></label>
            <input type="radio" onInput={onInput} id="star1half" name="rating" value="1.5" /><label className="half" htmlFor="star1half" ></label>
            <input type="radio" onInput={onInput} id="star1" name="rating" value="1" /><label className = "full" htmlFor="star1" ></label>
            <input type="radio" onInput={onInput} id="starhalf" name="rating" value="0.5" /><label className="half" htmlFor="starhalf"></label>
        </fieldset>
    )
}
export default connect(null, { ratePost })(Rate)

Answer 1

经过长时间的研究，问题是id中的inputs。它们必须是唯一的，所以我像这样更新了我的代码=>

return(
    <fieldset className="rating" >
        <input type="button" onClick={onClick} id={"star5"+props.post.id} name="rating" value="5" /><label className = "full" htmlFor={"star5"+props.post.id}></label>
        <input type="button" onClick={onClick} id={"star4half"+props.post.id} name="rating" value="4.5" /><label className="half" htmlFor={"star4half"+props.post.id} ></label>
        <input type="button" onClick={onClick} id={"star4"+props.post.id} name="rating" value="4" /><label className = "full" htmlFor={"star4"+props.post.id} ></label>
        <input type="button" onClick={onClick} id={"star3half"+props.post.id} name="rating" value="3.5" /><label className="half" htmlFor={"star3half"+props.post.id} ></label>
        <input type="button" onClick={onClick} id={"star3"+props.post.id} name="rating" value="3" /><label className = "full" htmlFor={"star3"+props.post.id} ></label>
        <input type="button" onClick={onClick} id={"star2half"+props.post.id} name="rating" value="2.5" /><label className="half" htmlFor={"star2half"+props.post.id} ></label>
        <input type="button" onClick={onClick} id={"star2"+props.post.id} name="rating" value="2" /><label className = "full" htmlFor={"star2"+props.post.id} ></label>
        <input type="button" onClick={onClick} id={"star1half"+props.post.id} name="rating" value="1.5" /><label className="half" htmlFor={"star1half"+props.post.id} ></label>
        <input type="button" onClick={onClick} id={"star1"+props.post.id} name="rating" value="1" /><label className = "full" htmlFor={"star1"+props.post.id} ></label>
        <input type="button" onClick={onClick} id={"starhalf"+props.post.id} name="rating" value="0.5" /><label className="half" htmlFor={"starhalf"+props.post.id}></label>
    </fieldset>
)

反应多个孩子发送相同的道具

1 个答案: