Javascript 用React.js单击url上的按钮增量ID

我正试图增加从

this.props.match.params.id

中获得的数字，以使DOM使用新的API获取的内容重新呈现。我试图通过在单击时调用函数并将值增加1来实现这一点。但是，这根本没有发生，它不是增加值，而是像这样连接：

这是我的代码：

export class Sofa extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            token: {},
            isLoaded: false,
            model: {}
        };
    }

    addOne = () => {
        console.log('addOne');
        this.props.match.params.id += 1;
        console.log('id: ', this.props.match.params.id);
    }

    lessOne = () => {
        console.log('lessOne');
    }

    componentDidMount() {

        /* fetch to get API token */


        fetch(url + '/couch-model/' + this.props.match.params.id + '/', {
            method: 'GET',
            headers: {
                'Content-Type': 'application/json',
                'Accept': 'application/json',
                'Authorization': 'JWT ' + (JSON.parse(localStorage.getItem('token')).token)
            }
        }).then(res => {
            if (res.ok) {
                return res.json();
            } else {
                throw Error(res.statusText);
            }
        }).then(json => {
            this.setState({
                model: json,
                isLoaded: true
            }, () => { });
        })
    }

    render() {

        const { model, isLoaded } = this.state;

        if (!isLoaded) {

            return (
                <div id="LoadText">
                    Loading...
                </div>
            )

        } else {

            return (
                <div id="Sofa">

                    /* other HTML not important for this matter */                        

                    <img src="../../../ic/icon-arrow-left.svg" alt="Arrow pointing to left" id="ArrowLeft"
                        onClick={this.lessOne}/>
                    <img src="../../../ic/icon-arrow-right.svg" alt="Arrow pointing to right" id="ArrowRight"
                        onClick={this.addOne}/>
                </div>
            );

        }

    }

}

导出类.组件{
建造师（道具）{
超级（道具）；
此.state={
令牌：{}，
isLoaded:false，
模型：{}
};
}
addOne=（）=>{
console.log（'addOne'）；
this.props.match.params.id+=1；
log（'id:'，this.props.match.params.id）；
}
lessOne=（）=>{
console.log（'lessOne'）；
}
componentDidMount（）{
/*获取API令牌*/
获取（url+'/coach model/'+this.props.match.params.id+'/'{
方法：“GET”，
标题：{
“内容类型”：“应用程序/json”，
“接受”：“应用程序/json”，
'Authorization'：'JWT'+（JSON.parse（localStorage.getItem（'token'））.token）
}
})。然后（res=>{
如果（res.ok）{
返回res.json（）；
}否则{
抛出错误（res.statusText）；
}
})。然后（json=>{
这是我的国家({
型号：json，
isLoaded：正确
}, () => { });
})
}
render（）{
const{model，isLoaded}=this.state；
如果（！已加载）{
返回(
加载。。。
)
}否则{
返回(
/*其他HTML对此不重要*/
);
}
}
}

很可能

这个.props.match.params.id

是一个字符串。执行此操作：

'1'+1

返回

'11'

很可能

此.props.match.params.id

是一个字符串。这样做：

'1'+1

返回

'11'

你不能操纵道具，它们是不可变的。您有几个选择：

使用Redux或其他形式的全局状态管理，并将计数器存储在那里

将计数器存储在父级状态，将其作为道具传递给子级，并使用回调函数允许子级递增计数器

将计数器的状态直接存储在子组件中，并在那里进行更新

---

当字符串连接时，JS认为它是字符串而不是数字。只需像这样递增

Number（this.props…id）+1

你不能操纵道具，它们是不可变的。您有几个选择：

使用Redux或其他形式的全局状态管理，并将计数器存储在那里

将计数器存储在父级状态，将其作为道具传递给子级，并使用回调函数允许子级递增计数器

将计数器的状态直接存储在子组件中，并在那里进行更新

---

当字符串连接时，JS认为它是字符串而不是数字。只需像这样递增

Number（this.props…id）+1

似乎

this.props.match.params.id

是字符串。向

字符串

变量中添加一个值作为concatation

在添加如下值之前，需要

parseInt

：

    this.props.match.params.id = parseInt(this.props.match.params.id) + 1;

---

似乎

this.props.match.params.id

是字符串。向

字符串

变量中添加一个值作为concatation

在添加如下值之前，需要

parseInt

：

    this.props.match.params.id = parseInt(this.props.match.params.id) + 1;

---

我猜这是一个“主要”组件-就在“下面”路由器。您不能从路由器修改参数-您应该生成指向下一个项目（指向同一组件）的链接，该项目将从路由器获得自己的道具（“更新”id）

你确定你会有连续的ID范围吗？数据库中没有删除？稀有的；）

通常，您有一个基于搜索/类别的项目列表。浏览列表。。。输入项目（按id），返回列表，输入另一个项目。浏览没有列表信息的项目有点困难，inc/dec id不是个好主意

将列表放入主组件中，将当前id传递给子组件（能够加载数据本身并呈现数据）。在main中准备下一个/上一个按钮（修改当前状态，循环它们？）-更改的属性（id）将强制渲染组件加载下一个数据

进一步。。。将next/prev提取到子组件中，从main传递处理程序（您没有传递它们，即使由于上述原因它无法工作）

仅通过id访问项目有点困难，例如，您可以为当前项目的下一个/上一个项目“询问”api。当数据准备好时，可以异步进行下一次/上一次渲染

---

不要一步到位；）

我猜这是一个“主要”组件-就在路由器的“下方”。您不能从路由器修改参数-您应该生成指向下一个项目（指向同一组件）的链接，该项目将从路由器获得自己的道具（“更新”id）

你确定你会有连续的ID范围吗？数据库中没有删除？稀有的；）

通常，您有一个基于搜索/类别的项目列表。浏览列表。。。输入项目（按id），返回列表，输入另一个项目。浏览没有列表信息的项目有点困难，inc/dec id不是个好主意

将列表放入主组件中，将当前id传递给子组件（能够加载数据本身并呈现数据）。在main中准备下一个/上一个按钮（修改当前状态，循环它们？）-更改的属性（id）将强制渲染组件加载下一个数据

进一步。。。将next/prev提取到子组件中，从main传递处理程序（您没有传递它们，即使由于上述原因它无法工作）

仅通过id访问项目有点困难，