为啥点击路线时会修改道具？

Posted 2023-02-22

【中文标题】为啥点击路线时会修改道具？

【英文标题】：Why are props being modified when clicking on a route?为什么点击路线时会修改道具？

【发布时间】：2020-11-15 12:19:17

【问题描述】：

我从摘要页面上的这两个链接开始。

我将点击第一个链接，一切正常显示，我不做任何更改并点击主页链接。

这是我的控制台日志：

但是，当我单击第二个链接并单击主页按钮而不进行任何更改时，我的牛奶和奥利奥的 uuid 正在更改。

我的 redux 状态是正确的，所以我知道我的状态没有被修改。

我的与Summary Page显示相关的组件是MealList和MealItem组件：

import React from 'react';
import  connect  from 'react-redux'
import MealItem from './MealItem'

const MealList = (props) => 
    return (
        <div>
            props.meals.length === 0 ? (
                <div>
                    <span>No Meals</span>
                </div>
            ) : (
                    props.meals.map(meal =>
                        <MealItem key=meal.uuid ...meal />
                    )
                )
        </div>
    );


const mapStateToProps = state => (
    meals: state.meals
)

export default connect(mapStateToProps)(MealList);

还有：

import React from 'react';
import  Link  from 'react-router-dom'



const MealItem = (props) => 
    console.log(props.uuid);
    console.log(props);
    return (
        <div>
            <Link to=`/edit/$props.uuid`>
                <h1>props.foodItem</h1>
            </Link>
            <h3>props.calories</h3>
        </div>
    );




export default MealItem

呈现 EditMealPage 的页面是：

import React,  Component  from 'react';
import  connect  from 'react-redux'
import  editServing  from './actions/meal';

class EditMealPage extends Component 
    constructor(props) 
        super(props)
        this.state = 
            uuid: this.props.meal.uuid,
            foodId: this.props.meal.foodId,
            measureURI: this.props.meal.measureURI,
            quantity: this.props.meal.quantity,
            mealCategory: this.props.meal.mealCategory
        
    

    onMeasureChange = e => (this.setState( measureURI: e.target.value ))
    onQuantityChange = e => (this.setState( quantity: e.target.value ))
    onMealCategoryChange = e => (this.setState( mealCategory: e.target.value ))

    onSubmit = e => 
        e.preventDefault()
        const  foodId, measureURI, quantity, uuid, mealCategory  = this.state
        const editsObj = 
            foodId,
            measureURI,
            quantity: parseInt(quantity)
        
        this.props.editServing(uuid, editsObj, mealCategory)

    

    render() 
        const  foodItem, calories, measures  = this.props.meal
        const  measureURI, quantity, mealCategory  = this.state
        return (
            <div>
                <h1>Edit Meal</h1>
                <h3>foodItem</h3>
                <h3>calories</h3>
                <div>
                    <form onSubmit=this.onSubmit>
                        <select
                            value=measureURI
                            onChange=this.onMeasureChange>
                            measures.map((measure, i) => <option key=i value=measure.uri>measure.label</option>)
                        </select>
                        <input
                            value=quantity
                            onChange=this.onQuantityChange
                            type="text"></input>
                        <select value=mealCategory
                            onChange=this.onMealCategoryChange>
                            <option value='breakfast'>Breakfast</option>
                            <option value='lunch'>Lunch</option>
                            <option value='dinner'>Dinner</option>
                            <option value='snack'>Snack</option>
                        </select>
                        <button type="submit">Edit Meal</button>
                    </form>
                </div>
            </div>
        )
    



const mapStateToProps = (state, props) => (
    meal: state.meals.find(meal => meal.uuid = props.match.params.uuid)
)

const mapDispatchToProps = dispatch => (
    editServing: (uuid, fetchObj, mealCategory) => dispatch(editServing(uuid, fetchObj, mealCategory))
)
export default connect(mapStateToProps, mapDispatchToProps)(EditMealPage)

我不知道为什么我的 uuid 属性被修改了。看来这是唯一被修改的道具，在我的路由文件中，uuid 是我使用的唯一参数<Route path='/edit/:uuid' component=EditMealPage />我做错了什么？

如果需要，GitHub 存储库的链接是 https://github.com/altafmquadri/caloriEat。

【问题讨论】：

您应该使用 react-router 提供的匹配对象访问您的 uuid 参数。您可以使用 withRouter hoc 包装您的 EditMealPage.js 组件，然后访问匹配属性。

【参考方案1】：

很难用这些代码来判断这里发生了什么（我们可能也需要减速器）所以我冒昧地下载了你的 repo 并在本地尝试它（包括在你的 API 中创建一个 API 密钥） '用来取回食物）。

话虽如此，在本地测试之后，我发现了问题，它是……一个错字！

结帐this line

const mapStateToProps = (state, props) => (
    meal: state.meals.find(meal => meal.uuid = props.match.params.uuid)
)

让我们仔细看看 find... 中的箭头函数...您正在执行分配而不是等于。 （= 与 ===）

替换为

meal => meal.uuid === props.match.params.uuid

会解决你的问题

【讨论】：

感谢您抽出时间来设置一切以帮助调试。

没问题！我认为问题出在减速器上。最终，我找到了错字，但原来那部分代码已经在问题中了。

【参考方案2】：

我想我找到了。如果不是达尼洛的评论，我不会检查。这是一个典型的错误，通常很难发现：

const mapStateToProps = (state, props) => (
    meal: state.meals.find(meal => meal.uuid = props.match.params.uuid)
)

您将props.match.params.uuid 的值与= 分配给meal.uuid，而您只想检查与=== 的相等性。