Javascript React-Redux:无法读取属性'；道具'；未定义的_Javascript_Reactjs_Redux

Javascript React-Redux:无法读取属性'；道具'；未定义的

javascript reactjs redux

Javascript React-Redux:无法读取属性'；道具'；未定义的,javascript,reactjs,redux,Javascript,Reactjs,Redux,对于一些背景信息，我对Redux是新手，但是我已经在同一个项目的不同类中实现了Redux函数。错误存在于handleDragStop函数中，其中this.props未定义。我确信action SetPotifySelectedTrackFeature是有效的，因为我是根据之前遵循的相同过程创建的。唯一的区别是这个组件被定义为常量，而不是类（我在其中成功地使用了redux函数），我认为这就是问题所在。有谁能指导我吗？多谢各位 import React,{useState} from 'react'

对于一些背景信息，我对Redux是新手，但是我已经在同一个项目的不同类中实现了Redux函数。错误存在于handleDragStop函数中，其中this.props未定义。我确信action SetPotifySelectedTrackFeature是有效的，因为我是根据之前遵循的相同过程创建的。唯一的区别是这个组件被定义为常量，而不是类（我在其中成功地使用了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)

import React，{useState}来自“React”
从'react redux'导入{connect}；
从“redux”导入{bindActionCreators}；
从“./actions/index”导入{SetPotifySelectedTrackFeature}；
从'@material ui/core/styles'导入{makeStyles}；
从“@material ui/core/Typography”导入排版；
从“@material ui/core/Slider”导入滑块；
从“@material ui/icons/Help”导入帮助图标；
从“@material ui/core/IconButton”导入IconButton；
从“@material ui/core/Tooltip”导入工具提示；
函数值文本（值）{
返回`${value}`；
}
const useStyles=makeStyles({
根目录：{
宽度：300
},
});
函数SpotifyRange滑块（详细信息）{
const classes=useStyles（）；
const[value，setValue]=useState（[35，65]）；
常量handleChange=（事件，newValue）=>{
设置值（新值）；
};
常量handleDragStop=（事件、值）=>{
此.props.setPotifySelectedTrackFeature(
{
“名称”：details.sliderLabel，
“最小”：值[0]，
“最大”：值[1]，
“详细信息”：详细信息。幻灯片详细信息
}
)
控制台日志（“更新”）
}
返回(
{details.sliderLabel}
);
}
//用于从存储中检索数据（还原器）
函数MapStateTops（状态）{
返回{
spotifySelectedTrackReducer:state.spotifySelectedTrackReducer
};
}
//用于发送数据以便调用操作
功能匹配DispatchToprops（调度）{
返回{
…bindActionCreators（{setSpotifySelectedTrackFeature}，dispatch）
};
}
导出默认连接（MapStateTrops、matchDispatchToProps）（SpotifyRange滑块）

问题在于，您试图在功能性非类组件中引用

this.props

。功能组件中没有

this.props

，类似于此组件中无法真正执行

this.state

。尝试通过功能组件道具访问映射状态到道具

spotifySelectedTrackReducer

，在本例中，您称它们为

详细信息

：

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

至少尝试注销

details

的值，看看有哪些道具可用。另一个选项是使用从存储中获取值，这可能更容易：

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))

希望这有帮助

问题是您试图在功能性的非类组件中引用

this.props