第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問(wèn)題,去搜搜看,總會(huì)有你想問(wèn)的

我在 redux 上寫(xiě)標(biāo)簽時(shí)犯了哪些錯(cuò)誤?我需要在我的代碼中更改什么?

我在 redux 上寫(xiě)標(biāo)簽時(shí)犯了哪些錯(cuò)誤?我需要在我的代碼中更改什么?

動(dòng)漫人物 2022-01-07 10:46:28
我在 React.js 上實(shí)現(xiàn)了非常簡(jiǎn)單的選項(xiàng)卡。你可以看到它在沙盒中是如何工作的:https : //codesandbox.io/s/react-tabs-redux-example-36psr 我的 React 代碼:import React from "react";import ReactDOM from "react-dom";const items = [{content:"London"}, {content:"Paris"}];class Content extends React.Component {    render(){        return (        <div>        {this.props.content}        </div>        );    }}class Tabs extends React.Component {    state = {        active: 0    }   open = (e) => {       this.setState({active: +e.target.dataset.index})   }    render(){        return(        <div>            {this.props.items.map((n, i)=>            <button data-index={i} onClick={this.open}>{n.content}</button>            )}       {this.props.items[this.state.active] && <Content {...this.props.items[this.state.active]} />}        </div>        );    }}ReactDOM.render(<Tabs items={items} />, document.getElementById("root"));但是現(xiàn)在我開(kāi)始研究 Redux,所以我決定在 Redux 上制作這些選項(xiàng)卡。但不幸的是,我在編輯器上的選項(xiàng)卡不起作用。我在編寫(xiě)代碼時(shí)犯了哪些錯(cuò)誤以及如何修復(fù)它們?
查看完整描述

1 回答

?
LEATH

TA貢獻(xiàn)1936條經(jīng)驗(yàn) 獲得超7個(gè)贊

以下是您必須解決的問(wèn)題才能使其正常工作:

語(yǔ)法錯(cuò)誤:

  1. onClick,this.props.someTab.active:應(yīng)該只是active:

  2. mapStateToProps,mapDispatchToProps并且connect應(yīng)該移到Tabs組件之外

  3. 你錯(cuò)過(guò)了一個(gè){以前this.props.items[this.prop.someTab.active]

一旦你修復(fù)了這些,你仍然會(huì)得到一些錯(cuò)誤,因?yàn)槟阍噲D訪(fǎng)問(wèn)不存在的道具的屬性。Tabs沒(méi)有連接到商店,所以您擁有的唯一道具是items. 添加inconsole.log(props)的第一行以了解我的意思。renderTabs

如何修復(fù) Redux 錯(cuò)誤:

  1. 您需要將您的商店傳遞給您的提供商: <Provider store={store}>

  2. 您正在調(diào)用連接,但沒(méi)有將您的組件連接到 Redux。修復(fù):

class Tabs extends Component {...}


const ConnectedTabs = connect(mapState, mapDispatch)(Tabs);


...

<Provider store={store}>

  <ConnectedTabs />

</Provider>

  1. mapStateToProps應(yīng)該返回一個(gè)對(duì)象,其屬性對(duì)應(yīng)于您的組件期望的道具,而不是減速器名稱(chēng)。在這種情況下:return { someTab: state.oneReducer.someTab }

現(xiàn)在您應(yīng)該看到一個(gè)沒(méi)有錯(cuò)誤的頁(yè)面。我們還沒(méi)有完成!

  1. mapDispatchToProps你需要調(diào)用你傳遞給的函數(shù)dispatch,特別是用你在組件中傳遞的參數(shù)調(diào)用它:

return { changeTab: change => dispatch(changeTab(change)) };

或者只是使用對(duì)象形式mapDispatch

const mapDispatchToProps = { changeTab } // it works!
  1. 在您的減速器中,您正在添加一個(gè)state.change屬性,當(dāng)您想要更新state.someTab.active. 你可以 return Object.assign({}, state, { someTab: { active: action.change.active } }),或者讓它更簡(jiǎn)單:去掉對(duì)someTabdo的引用Object.assign({}, state, { active })。

這應(yīng)該可以讓您大體上到達(dá)您想去的地方。

一些簡(jiǎn)化事情的建議:

  1. 此時(shí)你也真的不需要多個(gè)減速器。你真的可以直接reducer進(jìn)入createStore,并擺脫對(duì) . 的引用oneReducer。

  2. 您使用的唯一組件方法是render,因此您可以使用函數(shù)組件而不是類(lèi)組件。(this.props將成為props

  3. 你不需要data-index,你可以做onClick={() => props.changeTab({ active: i })}

另一個(gè)注意事項(xiàng):您可以搬進(jìn)items商店。你仍然可以通過(guò) props 訪(fǎng)問(wèn)它們,所有相關(guān)的狀態(tài)都將保存在一個(gè)地方,這是 Redux 的優(yōu)勢(shì)之一。

祝你好運(yùn)!


查看完整回答
反對(duì) 回復(fù) 2022-01-07
  • 1 回答
  • 0 關(guān)注
  • 146 瀏覽
慕課專(zhuān)欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢(xún)優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)