React 多个孩子发送相同的道具

Question

在我的 React 应用程序中，我从 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 Components 部分，它显示了多个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>

    )

    

}

费率.js

export function Rate(props) {

    const onInput = (e) => {

        props.ratePost(e.target.value, props.post.id)

        console.log(props.post) /* shows the same props */

    }

export default connect(null, { ratePost })(Rate)

Answer 1

经过长时间的研究，问题出id在inputs. 它们需要是独一无二的，所以我像那样更新了我的代码=>return(&nbsp; &nbsp; <fieldset className="rating" >&nbsp; &nbsp; &nbsp; &nbsp; <input type="button" onClick={onClick} id={"star5"+props.post.id} name="rating" value="5" /><label className = "full" htmlFor={"star5"+props.post.id}></label>&nbsp; &nbsp; &nbsp; &nbsp; <input type="button" onClick={onClick} id={"star4half"+props.post.id} name="rating" value="4.5" /><label className="half" htmlFor={"star4half"+props.post.id} ></label>&nbsp; &nbsp; &nbsp; &nbsp; <input type="button" onClick={onClick} id={"star4"+props.post.id} name="rating" value="4" /><label className = "full" htmlFor={"star4"+props.post.id} ></label>&nbsp; &nbsp; &nbsp; &nbsp; <input type="button" onClick={onClick} id={"star3half"+props.post.id} name="rating" value="3.5" /><label className="half" htmlFor={"star3half"+props.post.id} ></label>&nbsp; &nbsp; &nbsp; &nbsp; <input type="button" onClick={onClick} id={"star3"+props.post.id} name="rating" value="3" /><label className = "full" htmlFor={"star3"+props.post.id} ></label>&nbsp; &nbsp; &nbsp; &nbsp; <input type="button" onClick={onClick} id={"star2half"+props.post.id} name="rating" value="2.5" /><label className="half" htmlFor={"star2half"+props.post.id} ></label>&nbsp; &nbsp; &nbsp; &nbsp; <input type="button" onClick={onClick} id={"star2"+props.post.id} name="rating" value="2" /><label className = "full" htmlFor={"star2"+props.post.id} ></label>&nbsp; &nbsp; &nbsp; &nbsp; <input type="button" onClick={onClick} id={"star1half"+props.post.id} name="rating" value="1.5" /><label className="half" htmlFor={"star1half"+props.post.id} ></label>&nbsp; &nbsp; &nbsp; &nbsp; <input type="button" onClick={onClick} id={"star1"+props.post.id} name="rating" value="1" /><label className = "full" htmlFor={"star1"+props.post.id} ></label>&nbsp; &nbsp; &nbsp; &nbsp; <input type="button" onClick={onClick} id={"starhalf"+props.post.id} name="rating" value="0.5" /><label className="half" htmlFor={"starhalf"+props.post.id}></label>&nbsp; &nbsp; </fieldset>)