Question

我第一次在React应用上工作，并了解有关Redux的信息。我在App.js中定义商店并尝试使用提供者bu将其传递给应用程序的问题，当我尝试将其访问子组件时，使用 mapStateToProps映射后，我的控制台中有一个 undefined 。请您检查一下我的代码并告诉我做错了什么吗？

我在文件夹reducers调用index.js和testIt.js中创建了2个reducers，然后在index.js中导入testIt.js，其中具有CombineReducers来添加特征简化器。在我将其导出为App.js并使用react-redux的提供程序提供商店之后。

App.js


import React, { Component } from 'react';
import {BrowserRouter , Route} from "react-router-dom";
import { Provider } from 'react-redux';
import Store from "./reducers/index";
import { TestIt } from "./components/TestIt";

import './App.css';

//console.log(Store.getState());

class App extends Component {

  render() {
    return (

      <div className="App">
        <Provider store={Store}>
        <BrowserRouter>
          <Route exact path="/login" component={TestIt} />
        </BrowserRouter>
        </Provider>
      </div>

    );
  }
}

export default App;

reducers / index.js

import { combineReducers, createStore } from 'redux';
import notes from "./testIt";

const leadApp = combineReducers({
  notes
})

export default createStore(leadApp);

reducers / testIt.js

test .js

const initialState = [
    {text: "Write code!"}
  ];


  export default function notes(state=initialState, action) {
    switch (action.type) {
      default:
        return state;
    }
  }

最后我的子组件src / components / TestIt.js

import React, { Component } from 'react';
import {connect} from 'react-redux';


export class TestIt extends Component {

  constructor(props){
    super(props)
  }


  render() {
    console.log(this.props.notes)
    return (
      <div>
        <h2>Welcome to TestIt!</h2>
        <hr />
        <h3>Notes</h3>
        <table>
          <tbody>
            {this.props.notes.map(note => (
              <tr>
                <td>{note.text}</td>
                <td><button>edit</button></td>
                <td><button>delete</button></td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    )
  }
}


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

// const mapDispatchToProps = dispatch => {
//   return {
//   }
// }


export default connect(mapStateToProps)(TestIt);

我现在有这个.props.notes给我 undefined 减速器 testIt.j 。我怀疑商店中的东西会传递给 provider < / strong>即使我使用方法 connect（）进行连接也无法到达子组件。我希望可以在子组件中访问testIt.js精简器。

我真的需要帮助，请尝试阅读许多文章和文档。

Answer 1

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

未在state.notes中获取值，因为您是在notes.state中分配状态

您的代码：-

switch (action.type) {
  default:
    return state;
}

因此您将在state.notes.state中获得该值

如果要更改状态属性，则可以更改代码：-

export default function notes(state=initialState, action) {
    switch (action.type) {
      default:
        return {data:state};
    }
  }

子组件src / components / TestIt.js

const mapStateToProps = (state) => {
  return notes : state.notes.data
}

但这不是一个好的解决方案，因为该reducer没有任何动作类型，因此它将每次执行。

Answer 2

谢谢。我想办法解决我的问题在TestIt.js中的 class 之前删除 export 即可解决

。

将子组件与react-redux应用程序中的商店连接的问题

2 个答案: