React js无法分配给只读属性

Question

I have two components as category and category content.Category is the parent component.

function handlePageSize(pageValue) {
    props.pageSize = pageValue;
    // React.cloneElement(element, pageSize = pageValue)
}
    return (
        <Fragment>
            <Meta name="description" content={metaDescription} />
            <CategoryContent
                categoryId={id}
                classes={classes}
                data={loading ? null : data}
                pageControl={pageControl}
                sortProps={sortProps}
                onSelectSize = {handlePageSize}
            />
        </Fragment>
    );
};

Category.propTypes = {
    classes: shape({
        gallery: string,
        root: string,
        title: string
    }),
    id: number,
    pageSize: number
};

Category.defaultProps = {
    id: 3,
    // TODO: This can be replaced by the value from `storeConfig when the PR,
    // https://github.com/magento/graphql-ce/pull/650, is released.
    pageSize: 8
};

In category component there exists the pageSize prop.I need to change that value when I select a dropdown value in my child component categorycompontents.Following is child component

    let selectedValue = null;
    function onChangePageSize(event) {
        selectedValue = event.target.value
        onSelectSize(selectedValue);
    }
   <select id="lang" onChange={onChangePageSize} defaultValue={8} value={selectedValue}>
                            <option value="8">8</option>
                            <option value="16">16</option>
                            <option value="24">24</option>
                        </select>

I get the error 'Cannot assign to read only property' when I select the value.Is there any other way to do this.I need to change number of items displayed in the page instantly when I select my dropdown value.

Answer 1

You can not update the prop's properties value (React props are immutable).

What you can do is: put pageSize in a state and update it.

Here is an example:

// import useState hook
import { useState } from 'react';

// create a state
const [pageSize, setPageSize] = useState(8); // default value

// to update the value use `setPageSize(val)`
function handlePageSize(pageValue) {
   setPageSize(pageValue)
}

// to access the value, just use `pageSize`
console.log(pageSize)