无法在React中使用Redux状态来解决问题

未来杰拉尔德

**更新

我已将减速器更新为:

const initialState = {
step: 1,
indibiz: "individual",
firstName:"first",
lastName: "last",
email: "email",
choice: "null",
emailNews: "no",
dob: "1",
mobileNumber: "1234567890",
island: "St. Lucia",
industry: "Astronaut",
Skill: "Space Monkey",
createClick: false
}
export default function (state = initialState, action) {
switch (action.type) {
case "SELECT_BUSINESS":
  console.log(state);
  return { ...state, indibiz: action.payloadEvent }
  break;

}
 return state;
}

现在,我在console.log中看到以下内容,它正在从initialstate记录对象。但是,如果我尝试在同一组件中记录以下内容:{console.log(this.props.selectindibusi.indibiz)}然后,它将返回未定义的内容。它不是应该具有在reducer中设置的initialValue吗?

**更新结束

我正在使用react,并且目前正在尝试学习使用Redux并将其用于我正在做的项目中。问题是我觉得我不完全了解减速器。以下是我的减速器索引:

import {combineReducers} from 'redux';
import signupState from './reducer-signup.js';
import TestReducer from './testalertreducer.js';
import Selectindibusi from './reducer-select_indy_biz.js';

const allReducers = combineReducers({
  signupState: signupState,
  selectindibusi: Selectindibusi,
});

在我的signupState reducer中,我有:

export default function () {
  return ({
    step: 1,
    indibiz: "individual",
    firstName:"first",
    lastName: "last",
    email: "email",
    choice: "null",
    emailNews: "no",
    dob: "1",
    mobileNumber: "1234567890",
    island: "St. Lucia",
    industry: "Astronaut",
    Skill: "Space Monkey",
    createClick: false
  });
}

以下是操作:

export function selectindibusi(signupState, event) {
  const SELECT_BUSINESS = "random string";
  console.log(signupState);

  return {
    type: "SELECT_BUSINESS",
    payloadState: signupState,
    payloadEvent: event.target.value
  };
}

下面是正在监听该动作的reducer:

export default function (state = [], action) {
  switch (action.type) {
    case "SELECT_BUSINESS":
    console.log(state);

    return { ...state, indibiz: action.payloadEvent }
    break;    
  }

  return state;
}

我在一个类似以下内容的下拉菜单中的onChange动作中对此动作进行校准:

             <select className="formSelector100"  onChange={this.props.selectindibusi.bind(this,this.props.signupState)}>
                <option value="individual">Individual</option>
                <option value="business">Business</option>
              </select></label>

在操作中,我可以控制台记录正在传递的数据。问题在于它不是在signupState reducer中更新数据,也不是创建我可以访问的新对象。

在我的组件上,如果我尝试显示{this.props.signupState.indibiz},该值与reducer中的默认值相同,则不会更新。我觉得我在这里缺少一些基本的东西,我将不胜感激。

最终频率

根据您的响应,如果控制台状态日志返回一个空数组,则:

export default function () {
  return ({
    step: 1,
    indibiz: "individual",
    firstName:"first",
    lastName: "last",
    email: "email",
    choice: "null",
    emailNews: "no",
    dob: "1",
    mobileNumber: "1234567890",
    island: "St. Lucia",
    industry: "Astronaut",
    Skill: "Space Monkey",
    createClick: false
  });
}

没有被设置为状态。你应该怎么做是

const initialState = {
    step: 1,
    indibiz: "individual",
    firstName:"first",
    lastName: "last",
    email: "email",
    choice: "null",
    emailNews: "no",
    dob: "1",
    mobileNumber: "1234567890",
    island: "St. Lucia",
    industry: "Astronaut",
    Skill: "Space Monkey",
    createClick: false
  }

然后在您的signupState reducer中

export default function (state = initialState, action) {
  switch (action.type) {
    case "SELECT_BUSINESS":
       console.log(state);
       return { ...state, indibiz: action.payloadEvent }
    break;    
  }

  return state;
}

截至目前,您如何设置减速器没有收到正确的初始状态,因此为什么它认为状态为空数组。

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

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

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何解决react-redux解决问题?

来自分类Dev

Sitecore在查询分析器中使用快速查询来解决问题

来自分类Dev

MySQL JOIN,我无法解决问题

来自分类Dev

GcmBroadcastReceiver无法解决问题(Android Studio)

来自分类Dev

您能否建议使用Azure Web应用程序的URL重写规则来解决问题?

来自分类Dev

您能否建议使用Azure Web应用程序的URL重写规则来解决问题?

来自分类Dev

在btrfs RAID1上使用加密的/ boot和/来解决问题吗?

来自分类Dev

如何使用聚集和传播来解决问题?(提迪尔)

来自分类Dev

如何使用axios在发布请求中传递ReactJS状态数据时解决问题?

来自分类Dev

链接帖子并使用Restangular解决问题

来自分类Dev

React中的键重复,无法解决问题。遇到两个孩子用相同的钥匙

来自分类Dev

可以通过动态编程方法或回溯来解决问题

来自分类Dev

如何使用Array.sort解决问题无法分配为只读对象的属性'0'

来自分类Dev

使用Beautifulsoup-Python解决问题的Harvey Norman问题

来自分类Dev

Rails:使用get'signup'=>'users#new'而不是get'signup'来解决问题:'users#new'

来自分类常见问题

Scala类型不匹配,无法解决问题

来自分类Dev

如何解决问题RestControllerAdivse无法正常工作?

来自分类Dev

C While循环编译但仍然无法解决问题

来自分类Dev

在动作创建者中使用状态来反应redux

来自分类Dev

从功能上解决问题:如何使用Haskell?

来自分类Dev

如何使用composer.phar安装解决问题

来自分类Dev

如何使用Oracle DBMS_LOB解决问题

来自分类Dev

使用循环和字典更快地解决问题

来自分类Dev

如何使用大写检查器解决问题?

来自分类Dev

使用 web3.js 发送 signTransaction 并解决问题

来自分类Dev

使用 acviteadmin gem 时如何解决问题?

来自分类Dev

模板重载解决问题

来自分类Dev

cURL-解决问题

来自分类Dev

模板重载解决问题

Related 相关文章

  1. 1

    如何解决react-redux解决问题?

  2. 2

    Sitecore在查询分析器中使用快速查询来解决问题

  3. 3

    MySQL JOIN,我无法解决问题

  4. 4

    GcmBroadcastReceiver无法解决问题(Android Studio)

  5. 5

    您能否建议使用Azure Web应用程序的URL重写规则来解决问题?

  6. 6

    您能否建议使用Azure Web应用程序的URL重写规则来解决问题?

  7. 7

    在btrfs RAID1上使用加密的/ boot和/来解决问题吗?

  8. 8

    如何使用聚集和传播来解决问题?(提迪尔)

  9. 9

    如何使用axios在发布请求中传递ReactJS状态数据时解决问题?

  10. 10

    链接帖子并使用Restangular解决问题

  11. 11

    React中的键重复,无法解决问题。遇到两个孩子用相同的钥匙

  12. 12

    可以通过动态编程方法或回溯来解决问题

  13. 13

    如何使用Array.sort解决问题无法分配为只读对象的属性'0'

  14. 14

    使用Beautifulsoup-Python解决问题的Harvey Norman问题

  15. 15

    Rails:使用get'signup'=>'users#new'而不是get'signup'来解决问题:'users#new'

  16. 16

    Scala类型不匹配,无法解决问题

  17. 17

    如何解决问题RestControllerAdivse无法正常工作?

  18. 18

    C While循环编译但仍然无法解决问题

  19. 19

    在动作创建者中使用状态来反应redux

  20. 20

    从功能上解决问题:如何使用Haskell?

  21. 21

    如何使用composer.phar安装解决问题

  22. 22

    如何使用Oracle DBMS_LOB解决问题

  23. 23

    使用循环和字典更快地解决问题

  24. 24

    如何使用大写检查器解决问题?

  25. 25

    使用 web3.js 发送 signTransaction 并解决问题

  26. 26

    使用 acviteadmin gem 时如何解决问题?

  27. 27

    模板重载解决问题

  28. 28

    cURL-解决问题

  29. 29

    模板重载解决问题

热门标签

归档