Question

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

2020-11-29

122

javascript reactjs redux

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

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 访问映射到 prop spotifySelectedTrackReducer 的状态，在本例中您将其称为 details ：

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

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

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 是您作为 props 接收的参数。当我们使用类组件时，我们使用 this.props，但您使用的是 FunctionComponent。因此，我认为应该是 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)
}