为什么单击路线时会修改道具？

Question

我在摘要页面上从这两个 link 开始。

我将单击第一个 link 并且一切正常显示，我不做任何更改并单击主页 link。

这是我的控制台日志：

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

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

我的与摘要页面显示相关的组件是 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 回购的 link 是 https://github.com/altafmquadri/caloriEat。

Answer 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

将解决您的问题

Answer 2

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

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

您正在将 meal.uuid 的值分配给 =，而您只想检查 === 的值。

为什么单击路线时会修改道具？

Why are props being modified when clicking on a route?

javascript

reactjs

react-router

redux

redux-thunk