无法将Redux状态传递给子组件

食草动物

我是Redux的新手，并且一直在Redux docs中使用第一个示例项目的代码。该示例不使用容器或不使用单独的文件进行操作，因此我认为我将从此处开始并尝试对其进行抽象。

该项目没有App组件，并且index.js文件看起来像这样开始：

import React from 'react'
import ReactDOM from 'react-dom'
import { createStore } from 'redux'
import Counter from './components/Counter'
import counter from './reducers'

const store = createStore(counter)
const rootEl = document.getElementById('root')

const render = () => ReactDOM.render(
  <Counter
    value={store.getState()}
    onIncrement={() => store.dispatch({ type: 'INCREMENT' })}
    onDecrement={() => store.dispatch({ type: 'DECREMENT' })}
  />,
  rootEl
)

render()
store.subscribe(render)

我首先进行了更改，以使其改为安装App组件：

...

import { Provider } from 'react-redux':

...

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

我已将Counter组件移至App.js，并尝试mapStateToProps用于引入初始状态（state = 0在reducer中设置为）：

import React from 'react';
import Counter from '../components/Counter.js';
import { connect } from 'react-redux';

class App extends React.Component {

    render() {
        return(
            <div>
                <Counter value={value} />
            </div>
        );
    }
}

const mapStateToProps = (state) => {
    return { value: state.value };
}

export default connect(mapStateToProps)(App);

我正在尝试传递设置Counter的value道具mapStateToProps。

使用上面的代码，我在<Counter value={value} />以下位置收到错误：

未定义“值” no-undef

作为听起来很疯狂，我想也许我不得不初始化value一个内部constructor功能App，以使这项工作：

constructor() {
    super(props);

    this.state = {
        value: 0
    }
}

这是行不通的，而且考虑到在reducer中初始化了状态，这也毫无意义。

朱纳德·阿齐兹

您做对了，这非常简单，但是您只需在render方法中进行一些更改即可获取更新的值，从而解决问题。

只需在您的App组件中进行这些更改即可。

import React, {Component} from 'react';
import Counter from '../components/Counter.js';
import { connect } from 'react-redux';

class App extends Component {

  render() {
    const {
      props: {
        value
      }
    } = this;
    return(
        <div>
            <Counter value={value} />
        </div>
    );
  }
}

您不需要initialize在constructor方法中重视。

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。