React Redux：无法读取未定义的属性“道具”

Question

对于一些背景信息，我是 Redux 的新手，但是我已经在不同的 ZA42F2ED4F8EABCA6 项目中实现了 redux function。 错误在于未定义 this.props 的 handleDragStop function。 我确信操作 setSpotifySelectedTrackFeature 是有效的，因为我是根据我之前遵循的相同程序进行的。 唯一的区别是这个组件定义为 const 而不是 class （我在其中成功使用了 redux function），我认为这是问题所在。 任何人都可以指导我吗？ 谢谢

import React,{useState} from 'react'

import { connect } from 'react-redux';
import {bindActionCreators} from 'redux';
import {setSpotifySelectedTrackFeature} from "../actions/index";

import { makeStyles } from '@material-ui/core/styles';
import Typography from '@material-ui/core/Typography';
import Slider from '@material-ui/core/Slider';
import HelpIcon from '@material-ui/icons/Help';
import IconButton from '@material-ui/core/IconButton';
import Tooltip from '@material-ui/core/Tooltip';


function valuetext(value) {
  return `${value}`;
}

const useStyles = makeStyles({
  root: {
    width: 300
  },
});

function SpotifyRangeSlider(details) {
  const classes = useStyles();
  const [value, setValue] = useState([35, 65]);


  const handleChange = (event, newValue) => {
    setValue(newValue);
  };

  const handleDragStop = (event, value) => {
    this.props.setSpotifySelectedTrackFeature(
        {
          "name": details.sliderLabel,
          "min": value[0],
          "max": value[1],
          "details": details.sliderDetails
        }
    )
    console.log("updated")
  }

  return (
    <div className="slider">
      <Typography id="range-slider" gutterBottom>
        {details.sliderLabel}
       <Tooltip title={details.sliderDetails}>
          <IconButton>
            <HelpIcon />
          </IconButton> 
       </Tooltip>
      </Typography>
      <Slider
        value={value}
        onChange={handleChange}
        onChangeCommitted={handleDragStop}
        valueLabelDisplay="auto"
        aria-labelledby="range-slider"
        getAriaValueText={valuetext}
      />
    </div>
  );
}

//Used to retrieve data from the store(reducers)
function mapStateToProps(state){
  return{
    spotifySelectedTrackReducer: state.spotifySelectedTrackReducer
  };
}

//Used to send data so that an action can be called
function matchDispatchToProps(dispatch){
  return {
      ...bindActionCreators({setSpotifySelectedTrackFeature}, dispatch)
  };
}

export default connect(mapStateToProps, matchDispatchToProps)(SpotifyRangeSlider)

Answer 1

问题是您试图在功能性非类组件中引用this.props 。 功能组件没有this.props ，类似于您无法在此组件中真正执行this.state的方式。 尝试通过功能组件 props 访问映射的 state 来支持spotifySelectedTrackReducer ，在这种情况下，您将它们称为details ：

const handleDragStop = (event, value) => {
  details.setSpotifySelectedTrackFeature(
    {
      "name": details.sliderLabel,
      "min": value[0],
      "max": value[1],
      "details": details.sliderDetails
    }
  )
  console.log("updated")
}

至少尝试注销details的值并查看可用的道具。 另一种选择是使用react-redux 挂钩从存储中获取值，这可能更容易：

import { useDispatch, useSelector } from 'react-redux'

// ...
function SpotifyRangeSlider(details) {
  const spotifySelectedTrackReducer = useSelector(state => state.spotifySelectedTrackReducer)
  // ...
  // dispatch action using a hook also
  const dispatch = useDispatch()
  dispatch(setSpotifySelectedTrackFeature(someArguments))

希望这会有所帮助！

Answer 2

我当前的上下文details是您作为道具接收的参数。 当我们使用 class 组件但您使用 FunctionComponent 时，我们使用 this.props。 所以，我认为应该是details.setSpotifySelectedTrackFeature而不是this.props.setSpotifySelectedTrackFeature

Answer 3

功能组件中没有 this.props。 它们看起来像这样：

function MyFuntionalComponent(props) {
  console.log(props.someThing)
}

//You can also destructure them how I like it
function MyFuntionalComponent({ name, id, someThing }) {
  console.log(someThing)
}