时间戳

首页 > 解决方案 > TypeError：无法分配给对象“[object Array]”的只读属性“0”

javascript - TypeError：无法分配给对象“[object Array]”的只读属性“0”

问题描述

我真的很依赖这个问题，我试图将 Material UI 滑块与 redux 一起使用。

这里是滑块组件：

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

这里是具有 redux 逻辑的过滤器组件：

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逻辑时出现错误，当我用console.log测试时很好，但是随着调度，出现这个错误，也是一个随机错误，因为我可以测试调度2-3次没有错误，但是接下来出现这个错误

我能做些什么来解决这个问题？

提前致谢。

标签： javascriptreact-reduxnext.js

解决方案

我不确定是什么问题，但你的减速器肯定是错的。你做：

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而不是在任何地方调用它。在您的代码中， whateveruseState 和useDispatchreturn 是相互独立的。

推荐阅读