Question

我正在尝试运行一个Redux动作，该动作将获取db并将其存储在状态变量中。然后，我将此变量用作Material UI Slider的默认值。我正在初始化此默认值（以避免为null，通常可以解决问题），然后在提取完成时使用useState设置值。我无法摆脱警告组件在初始化后正在更改不受控制的Slider的默认值状态。尽管我的滑块值从未设置为Null 以下是我的页面代码和减速器页面：

import React, { useState, useEffect } from 'react';
import Card from '@material-ui/core/Card';
import CardContent from '@material-ui/core/CardContent';
import Typography from '@material-ui/core/Typography';
import Slider from '@material-ui/core/Slider';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import { getSettings } from '../../actions/settingsActions';

const Settings = ({ getSettings, settings }) => {
  React.useEffect(() => {
    getSettings();

    // eslint-disable-next-line
  }, []);

  const [current, setCurrent] = useState({
    ageAtDeath: 50,
  });

  React.useEffect(() => {
    if (settings.ageAtDeath) {
      //only loads when settings is not null as set in initial state getSettings() completed!
      setCurrent({
        ageAtDeath: settings.ageAtDeath,
      });
    }
  }, [settings]);

  return (
    <Card>
      <CardContent>
        <Typography color='textSecondary' gutterBottom>
          Age at death:
        </Typography>
        <Slider
          defaultValue={current.ageAtDeath}
          aria-labelledby='discrete-slider'
          valueLabelDisplay='auto'
          step={10}
          marks
          min={10}
          max={110}
        />
      </CardContent>
    </Card>
  );
};

Settings.propTypes = {
  getSettings: PropTypes.func.isRequired,
  settings: PropTypes.object.isRequired,
};

const mapStateToProps = (state) => ({
  settings: state.settings.settings,
});

export default connect(mapStateToProps, {
  getSettings,
})(Settings);

减速器代码：

import {
  GET_SETTINGS,
 
} from '../actions/Types';

const initialState = {
  settings: {ageAtDeath: 0},

};

export default (state = initialState, action) => {
  switch (action.type) {
    case GET_SETTINGS:
      return {
        ...state,
        settings: action.payload,
        
      };
    default:
      return state;
  }
};

Answer 1

我通过向组件添加键解决了此问题

<Slider
    key={`slider-${currentConcurrency}`} /* fixed issue */
    defaultValue={currentConcurrency}
    step={1}
    max={maxConcurrency}
    min={1}
    marks
    valueLabelDisplay={'auto'}
    onChangeCommitted={this.handleSliderChange('currentConcurrency')} /* increase render performance */
/>

Answer 2

您应该使用 value 属性而不是 defaultValue

  <Slider
      value={current.ageAtDeath} /*defaultValue={current.ageAtDeath}*/
      aria-labelledby='discrete-slider'
      valueLabelDisplay='auto'
      step={10}
      marks
      min={10}
      max={110}
    />

Answer 3

我通过遵循this post的回答来解决了这个问题。

这是最终代码。

const onChange = (name) => (e, value) => {
    setCurrent({
      ...current,
      [name]: value,
    });
  };

确保在调用onChange时添加要更改的值的名称

               <Slider
                id='costInflation'
                name='costInflation'
                value={costInflation}
                onChange={onChange('costInflation')}
                min={0}
                max={50}
                valueLabelDisplay='on'
              />

组件在初始化后正在更改不受控制的Slider的默认值状态。具有Redux状态的材质UI滑块

3 个答案: