亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

無法將組件連接到 Redux 存儲

無法將組件連接到 Redux 存儲

慕勒3428872 2022-10-27 15:44:21
我正在嘗試將我的組件 CMSForm 連接到 Redux 商店,但無法這樣做。這是我的:減速器:const cmsDefaultState = {  cmsNum: "",  facilityName: ""};export default (state = cmsDefaultState, action) => {  switch (action.type){    case 'SET_CMS_ID':      return Object.assign({}, state, {        cmsNum: action.cmsNum      });    case 'SET_FACILITY_NAME':      return [             ...state,              action.facilityName          ];    default:      return state;  }};店鋪:import { createStore} from 'redux'import CMSReducer from './CMSReducer.js'export default () => {  const store = createStore(CMSReducer);  return store;};選擇器:export const getCMSNum = store =>  store.cmsNumexport const getFacilityName = store =>  store.facilityName方法:export const setCMSId = (cmsNum = '') => ({  type: 'SET_CMS_ID',  cmsNum});export const setFacilityName = (facilityName = '') => ({  type: 'SET_FACILITY_NAME',  facilityName});這是組件:import React from 'react'import { connect } from 'react-redux';import { setCMSId } from '../redux/methods'import { getCMSNum } from "../redux/selectors";function mapStateToProps(state) {  const { CMSReducer } = state  return { CMSForm: CMSReducer }}class CMSForm extends React.Component {  constructor(props) {    super(props);    this.state = {      cmsCertificationNumber: '',      facility_name: ''    };    this.handleChange = this.handleChange.bind(this);    this.handleCmsNumber = this.handleCmsNumber.bind(this);  }  handleCmsNumber = () => {    // dispatches actions to add todo    debugger    setCMSId(this.state.cmsCertificationNumber);    alert("CMS Number: " + this.state.cmsNum);  } // end of HandleCMSNumebr  handleChange(event) {   this.setState({cmsCertificationNumber: event.target.value}); }  render() {    return (      <div>        <input type="text" value={this.state.cmsCertificationNumber} onChange={this.handleChange} />        <button className="update-cmsNum" onClick={this.handleCmsNumber}>          Find        </button>      </div>    )  }
查看完整描述

1 回答

?
蕪湖不蕪

TA貢獻1796條經驗 獲得超7個贊


你需要糾正的事情:


在這里,您返回一個數組,但您的狀態是一個對象。


case 'SET_FACILITY_NAME':

   return [

          ...state,

           action.facilityName

       ];

如果你看一下這行代碼:


setCMSId(this.state.cmsCertificationNumber)


您只是在調用返回對象的函數。您應該調度該操作。


您有一個未使用的功能


function mapStateToProps(state) {

 const { CMSReducer } = state

 return { CMSForm: CMSReducer }

}

您沒有使用此處映射到道具的狀態:


export default connect(state => ({ cmsNum: getCMSNum(state) }))(CMSForm);

更新


您可以通過這種方式使用調度:


import React from 'react'

import { connect } from 'react-redux';

import { setCMSId } from '../redux/methods'

import { getCMSNum } from "../redux/selectors";



class CMSForm extends React.Component {


    constructor(props) {

        super(props);


        this.state = {

            cmsCertificationNumber: '',

            facility_name: ''

        };

    }


    handleCmsNumber = () => {

        // to dispatch the `setCMSId` action.

        this.props.setCMSId(this.state.cmsCertificationNumber);


    } // end of HandleCMSNumebr


    handleChange = (event) => {

        this.setState({ cmsCertificationNumber: event.target.value });

    }


    render() {

        console.log(this.props.cmsNum);

        return (

            <div>


                <input type="text" value={this.state.cmsCertificationNumber} onChange={this.handleChange} />


                <button className="update-cmsNum" onClick={this.handleCmsNumber}>

                    Find

        </button>

            </div>

        )

    }

} // end of component


const mapStateToProps = state => ({ cmsNum: getCMSNum(state) });

const mapDispatchToProps = {setCMSId};


export default connect(mapStateToProps, mapDispatchToProps)(CMSForm);


查看完整回答
反對 回復 2022-10-27
  • 1 回答
  • 0 關注
  • 167 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號