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

Question

I'm trying to increment the number I get from this.props.match.params.id to get the DOM to re-render with new API fetched content. I was trying to do that by calling a function on Click and incremeting value by one. However, that's not happening at all, instead of incrementing the value, it concatenates like this:

https://imgur.com/a/dnKScN0

This is my code:

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

You can't manipulate props, they are immutable. You have a few options:

1. Use Redux or some other form of global state management and store the counter there.
2. Store the counter in the state of the parent, pass it down as a prop to the child along with a callback function allowing the child to increment the counter.
3. Store the state for the counter directly within the child component and update it there.

As your string is concatenating JS thinks its a string and not a number. Just increment like so Number(this.props...id) + 1

Answer 2

Very likely this.props.match.params.id is a string. Doing this: '1'+1 returns '11' .

Answer 3

It seems that this.props.match.params.id is string. Adding a value to string variable works as concatination.

You need to parseInt before adding a value like:

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

Answer 4

I guess this is a 'main' component - just 'below' router. You can't modify param from router - you should generate link to next item (pointing the same component) which will get it's own props ('updated' id) from router.

You're sure you will have contiuous range of ids? No deletions in db? Rare ;)

Normally you have a searched/category based list of items. Browsing list ... entering item (by id), back to list, enter another item. Browsing items w/o info about list is a little harder and inc/dec id isn't good idea.

Get list into main component, pass current id to sub-component (able to load data itself and render it). Prepare next/prev buttons in main (modify current in state, loop them?) - changed prop (id) will force rendering component to load next data.

Further ... extract next/prev into sub-components, passing handlers from main (you didn't passed them and even if it won't work for reasons above).

Accessing items only by id is a bit harder, fe you can 'ask' api for next/prev items for current one. It can be done async - render next/prev when data will be ready.

Don't make all in one step ;)