Question

我是Redux模式的新手，我在将单独的JS文件中的操作链接到它的父组件时遇到了一些麻烦。这是组件：

import React, {Component} from 'react';
import {bindActionCreators} from 'redux';
import {connect} from 'react-redux';
import playSample from './sampleActions/clickToPlay';

class SamplesInnerLrg extends Component {  
    render() {
         return <div>
   {
     this.props.samples.map((sample) => {
        return (
                <div key={sample.id} className="sample-comp-lge">
                    <div className="sample-comp-lge-header">
                        <span className="sample-comp-lge-Name">{sample.sampleName}</span>
                        <span className="sample-comp-lge-id">{sample.sampleFamily}</span>
                    </div>
                    <div className="sample-comp-lge-audio" ref={sample.id} onClick={() => this.bind.playSample(sample)}>
                        <audio preload="auto" id="myAudio">
                              <source src={sample.soundSource} type="audio/wav" />
                        </audio>
                    </div>
                    <div className="sample-comp-lge-owner">{sample.uploader}</div>
                </div>
            )
        })
     }
   </div>
    }
}

function mapStateToProps(state) {
    return {
        samples:state.samples
    };
} 

function matchDispatchToProps(dispatch) {
    return bindActionCreators({playSample:playSample},dispatch)
}

export default connect(mapStateToProps,matchDispatchToProps)(SamplesInnerLrg);

具体来说，我试图对此行进行onClick操作，该操作将调用导入文件中的函数（clickToPlay.js）：

<div className="sample-comp-lge-audio" ref={sample.id} onClick={() => this.bind.playSample(sample)}>

clickToPlay文件如下所示：

import $ from 'jquery';

export const playSample = (sample) => {
    console.log(sample);

        return {
            type:"Play_Sample_clicked",
            payload:sample
        }
    };

我点击的错误是无法阅读属性＆＃39; playSample＆＃39;未定义的。我猜测我已经将操作严格限制在组件中，但我不知道为什么？

编辑：

这是我索取的index.js文件：

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import {Provider} from 'react-redux';
import { createStore,compose } from 'redux';
import allReducers from './reducers';

const store = createStore(allReducers,compose(
    window.devToolsExtension ? window.devToolsExtension() : f => f
    ));

ReactDOM.render(
    <Provider store={store}>
        <App />
    </Provider>
  ,
  document.getElementById('root')
);

Answer 1

您没有将'playSample'导出为默认导出，您有两种方法可以重新开发：

你可以这样做：

import { playSample } from './sampleActions/clickToPlay';

或

您可以将export const playSample更改为const playSample然后在文件末尾添加export default playSample。

我想提及另一个关于这一行的说明：

return bindActionCreators({playSample:playSample},dispatch)

我不明白您为什么要{playSample:playSample}将其更改为playSample。如果密钥与值相同，ES6允许您删除密钥，这称为对象文字属性值缩写。

与Redux反应 - 无法将操作绑定到父级

1 个答案: