Question

React js无法分配给只读属性

2020-10-21

6323

javascript reactjs react-props

我有两个组件：类别和类别内容。类别是父组件。

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
};

在类别组件中存在 pageSize 属性。当我在子组件 categorycompontents 中选择下拉值时，我需要更改该值。以下是子组件

    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>

当我选择该值时，出现错误“无法分配给只读属性”。还有其他方法可以做到这一点吗？当我选择下拉值时，我需要立即更改页面中显示的项目数。

Answer 1

您无法更新 prop 的属性值（React props 是不可变的）。

您可以做的是：将 pageSize 置于某个状态并更新它。

这是一个例子：

// 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)