时间戳

首页 > 解决方案 > React js无法分配给只读属性

javascript - React js无法分配给只读属性

问题描述

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

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 属性。当我在子组件类别组件中选择下拉值时，我需要更改该值。以下是子组件

    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>

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

标签： javascriptreactjsreact-props

解决方案

您不能更新道具的属性值（React 道具是不可变的）。

你可以做的是：放入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)

推荐阅读