我在 redux 上写标签时犯了哪些错误？我需要在我的代码中更改什么？

Question

我在 React.js 上实现了非常简单的选项卡。

你可以看到它在沙盒中是如何工作的：

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"));

但是现在我开始研究 Redux，所以我决定在 Redux 上制作这些选项卡。但不幸的是，我在编辑器上的选项卡不起作用。

我在编写代码时犯了哪些错误以及如何修复它们？

Answer 1

以下是您必须解决的问题才能使其正常工作：语法错误：在onClick,this.props.someTab.active:应该只是active:mapStateToProps,mapDispatchToProps并且connect应该移到Tabs组件之外你错过了一个{以前this.props.items[this.prop.someTab.active]一旦你修复了这些，你仍然会得到一些错误，因为你试图访问不存在的道具的属性。Tabs没有连接到商店，所以您拥有的唯一道具是items.&nbsp;添加inconsole.log(props)的第一行以了解我的意思。renderTabs如何修复 Redux 错误：您需要将您的商店传递给您的提供商：&nbsp;<Provider store={store}>您正在调用连接，但没有将您的组件连接到 Redux。修复：class Tabs extends Component {...}const ConnectedTabs = connect(mapState, mapDispatch)(Tabs);...<Provider store={store}>&nbsp; <ConnectedTabs /></Provider>mapStateToProps应该返回一个对象，其属性对应于您的组件期望的道具，而不是减速器名称。在这种情况下：return { someTab: state.oneReducer.someTab }现在您应该看到一个没有错误的页面。我们还没有完成！在mapDispatchToProps你需要调用你传递给的函数dispatch，特别是用你在组件中传递的参数调用它：return&nbsp;{&nbsp;changeTab:&nbsp;change&nbsp;=>&nbsp;dispatch(changeTab(change))&nbsp;};或者只是使用对象形式mapDispatch：const&nbsp;mapDispatchToProps&nbsp;=&nbsp;{&nbsp;changeTab&nbsp;}&nbsp;//&nbsp;it&nbsp;works!在您的减速器中，您正在添加一个state.change属性，当您想要更新state.someTab.active.&nbsp;你可以 return&nbsp;Object.assign({}, state, { someTab: { active: action.change.active } })，或者让它更简单：去掉对someTabdo的引用Object.assign({}, state, { active })。这应该可以让您大体上到达您想去的地方。一些简化事情的建议：此时你也真的不需要多个减速器。你真的可以直接reducer进入createStore，并摆脱对 . 的引用oneReducer。您使用的唯一组件方法是render，因此您可以使用函数组件而不是类组件。（this.props将成为props）你不需要data-index，你可以做onClick={() => props.changeTab({ active: i })}另一个注意事项：您可以搬进items商店。你仍然可以通过 props 访问它们，所有相关的状态都将保存在一个地方，这是 Redux 的优势之一。祝你好运！