const OrderItem = (props) => {
    const [item,setItem] = useState(props.content)
    const [editing,setEditing] = useState(false)
    const [commentVal,setCommentVal] = useState(item.commentVal || '')
    const [star,setStar] = useState(item.star || 0)
    //评论框
    const domCommentBox=() =>{
        return (
            <div className='orderItem__commentBox'>
                <textarea className='orderItem__edit' value={commentVal} onChange={commentChange}></textarea>
                {domCommentStar()}
                <button className='orderItem__btn orderItem__btn--save' onClick={commentSave}>提交</button>
                <button className='orderItem__btn orderItem__btn--cancel' onClick={commentCancel}>取消</button>
            </div>
        )
    }
    //评星级
    const domCommentStar=()=>{
        return(
            <div className='orderItem-star'>
                {
                    [1,2,3,4,5].map((i,index)=>{
                        const light = star >= i ? "orderItem-star--light" : ""
                        return <span className={light} key={index} onClick={starClick.bind(this,i)}>★</span>
                    })
                }
            </div>
        )
    }
    const starClick=(i)=>{
        setStar(i)
    }
    const commentClick=()=>{
        setEditing(true)
    }
    const commentChange=(e)=>{
        setCommentVal(e.target.value)
    }
    const commentCancel=()=>{
        setEditing(false)
        setCommentVal('')
        setStar(0)
    }
    //提交评价
    const commentSave=()=>{
        // fetch('/commentSave').then(res=>{
        //     if(res.ok){  //请求成功后模拟渲染页面
                const newItem = {...item,commentVal,star,ifEvaluate:true}
                setItem(newItem)
                console.log(newItem)
                setEditing(false)
        //     }
        // })
       
    }
    return (
        <div className='orderItem'>
            <div className='orderItem-main'>
                <div className='orderItem__imgBox'>
                    <img className='orderItem__img' src={item.img}/>
                </div>
                <div className='orderItem__cont'>
                    <div className='orderItem__title'>{item.title}</div>
                    <div className='orderItem__detail'>{item.detail}</div>
                    <div className='orderItem__price'>{item.price}</div>
                </div>
                <div className='orderItem__btnBox'>
                    {
                        item.ifEvaluate ? (<button className='orderItem__btn orderItem__btn--true'>已评价</button>) :
                        (<button className='orderItem__btn orderItem__btn--false' onClick={commentClick}>评价</button>)
                    }
                </div>                
            </div>
            {editing ? domCommentBox() : null}
        </div>
    );
};

如果props.data.stars是有值的就取该值，否取值为0

id值相同用===，如果相同，将item中的comment、stars、ifCommented（值为true）修改掉，如果不同，仍然返回item

map ...