类型错误： 无法将对象'[object Array]'的只读属性'0'分配给只读

Question

我真的很后悔这个问题，因为我试图使用带有redux的Material UI滑块。

这里是滑块组件：

import { Slider } from '@material-ui/core'
const RangeSlider = ({handleRange, range}) => {

const handleChange = (event, newValues) => {
handleRange(newValues)
}
return (
<Slider
value={range}
onChange={handleChange}
valueLabelDisplay="auto"
aria-labelledby="range-slider"
min={0}
max={100}
/>
)
}
export default RangeSlider

这里是具有冗余逻辑的滤波器组件：

import {
Button,
Typography as Tp,
Select,
MenuItem,
Accordion,
AccordionDetails,
AccordionSummary,
} from "@material-ui/core";
import { ExpandMore } from "@material-ui/icons";
import { RangeSlider } from "../components";
import { useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { filterUpdate } from "../redux/actions/filter";
const Filter = ({ models }) => {
const [range, setRange] = useState([0,60]);
const [modelSelected, setModelSelected] = useState("None");
const handleRange = (newValue) => setRange(newValue);

const handleModel = (event) => setModelSelected(event.target.value);
const dispatch = useDispatch();
const handleSubmit = () => {
let filterValues = {
range,
modelSelected,
};
dispatch(filterUpdate(filterValues));
};
return (
<div className="container mt-3 ">
<Accordion>
<AccordionSummary
expandIcon={<ExpandMore />}
aria-controls="panel-filter-content"
id="panel-filter-header"
>
<Tp>Sort your search</Tp>
</AccordionSummary>
<AccordionDetails className='d-flex align-items-center bg-light pb-3'>
<div className='col-md-6'>
<Tp className="mt-3">Pick up a price range</Tp>
<RangeSlider handleRange={handleRange} range={range} />
</div>
<div className="col">
<div className="col text-center pb-3">
<Tp className="mt-3">Sort by model</Tp>
<Select value={modelSelected} onChange={handleModel}>
{models.map((model) => {
return (
<MenuItem key={model} value={model}>
{model}
</MenuItem>
);
})}
</Select>
</div>
</div>
<div className=" col mt-5 text-center">
<Button onClick={handleSubmit} variant="outlined" color="primary">
Submit
</Button>
</div>
</AccordionDetails>
</Accordion>
</div>
);
};
export default Filter;

Redux动作逻辑：

import { createAction } from '@reduxjs/toolkit'
import types from '../types'
export const filterUpdate = createAction(types.FILTER_UPDATE)

此处还原剂：

import { createReducer } from '@reduxjs/toolkit'
import { filterUpdate } from '../actions/filter'
const reducer = createReducer({
range: [0,60],
model: 'None'
}, {
[filterUpdate]: (state, action) => {
state.range =  action.payload.range
state.model = action.payload.modelSelected
}
})
export default reducer

当我包括redux逻辑时，当我用控制台测试时，错误就会出现。log很好，但对于调度，出现这个错误，也是一个随机错误，因为我可以测试调度2-3次而没有错误，但下一个这个错误会出现

我该怎么办？

提前谢谢。

Answer 1

在我的例子中，它无法对Slider内部的函数进行排序。这是因为我传递给组件的值是只读的(不可变的(。所以为了避免这个错误，我应该在值道具中传递范围数组的副本。像这样：

<Slider
value={[...range]}
// ....other props
/>

Answer 2

我不确定问题出在哪里，但你的减速器肯定错了。你做：

const reducer = createReducer({
range: [0,60],
model: 'None'
}, {
[filterUpdate]: (state, action) => {
state.range =  action.payload.range
state.model = action.payload.modelSelected
}
})

你可能想这么做：

const reducer = createReducer({
range: [0,60],
model: 'None'
}, {
[filterUpdate]: (state, action) => ({
range: action.payload.range,
model: action.payload.modelSelected,
})
})

此外，您实际上并没有从redux存储中提取状态。您正在导入useSelector，而不是在任何位置调用它。无论useState和useDispatch返回什么，在代码中都是相互独立的。