Question

我正尝试增加从this.props.match.params.id获得的数字，以使DOM用新的API提取的内容重新呈现。我试图通过在Click上调用一个函数并将值增加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>
            );

        }

    }

}

Answer 1

您无法操纵道具，它们是不可变的。您有几种选择：

使用Redux或其他某种形式的全局状态管理，并将计数器存储在此处。
将计数器存储在父级状态下，作为道具传递给孩子，并带有允许孩子递增计数器的回调函数。
将计数器的状态直接存储在子组件中，然后在其中进行更新。

在连接字符串时，JS认为它是字符串而不是数字。像这样Number(this.props...id) + 1

Answer 2

很有可能this.props.match.params.id是一个字符串。这样做：'1'+1返回'11'。

Answer 3

似乎this.props.match.params.id是字符串。将值添加到string变量中可以作为隐含条件。

您需要先parseInt，然后再添加类似以下内容的值：

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

Answer 4

我猜这是一个“主要”组件-只是在“下方”路由器。您无法通过路由器修改参数-您应该生成指向下一项的链接（指向相同的组件），该链接将从路由器获取其自身的道具（“更新的ID”）。

您确定您将拥有连续的ID范围？数据库中没有删除？稀有;）

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

将列表获取到主要组件中，将当前ID传递给子组件（能够加载数据本身并进行渲染）。在主屏幕中准备下一个/上一个按钮（修改状态下的电流，是否将其循环？）-更改后的prop（id）将强制渲染组件加载下一个数据。

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

仅通过id访问项目会比较困难，例如您可以为当前项目的下一个/上一个项目“询问” api。可以异步完成-在数据准备就绪时渲染下一个/上一个。

不要一all而就；）

使用React.js在URL上的按钮增量ID的onClick

4 个答案: