Блог

У меня есть два компонента: категория и содержимое категории.Категория является родительским компонентом.

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

В компоненте category существует параметр pageSize.Мне нужно изменить это значение, когда я выбираю выпадающее значение в моем дочернем компоненте categorycomponents.Ниже приведен дочерний компонент

     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>
  

При выборе значения я получаю сообщение об ошибке «Невозможно назначить свойство только для чтения».Есть ли какой-либо другой способ сделать это.Мне нужно мгновенно изменить количество элементов, отображаемых на странице, когда я выбираю свое выпадающее значение.

Вы не можете обновить значение свойств 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)