React / Redux:状态已更新但组件未刷新

时间:2018-04-15 14:29:10

标签: reactjs react-redux components state

我正在使用React / Redux构建应用程序。

这是Json:

{
  "categories": [
    {
      "id": 1,
      "name": "category 1",
      "slug": "category-1"
      "content": [
        {
          "id": 1,
          "title": "title 1 "
        },
        {
          "id": 2,
          "title": "title 2 "
        }
      ]
    }
  ]
}

我想要做的是为类别添加内容。

  • 路径" / categories" =类别列表
  • 我点击类别,我被重定向到" / categories / id" =列表 此类别的内容。

我正在尝试添加内容。 当我添加内容("标题")时,我的状态会更新,但我的组件却没有。

这是我的app.js

const App = () => (
    <Router>
        <div className="container">         
            <Navbar/>           
            <hr/>
            <Route exact path="/(categories|)/" component={CategoryList} />
                <Route exact path="/categories/:id" component={CategoryDetail} />
        </div>
    </Router>
);

CategoryDe​​tail组件

    class CategoryDetail extends Component {

        getDetail() {
            console.log("getdetail here");      
            const detail = this.props.categorySelected.content.map((content) =>
                <div key={content._id}> 
                    <p> <strong>{content.title}</strong></p>
                </div>
            );

            return (
                <div>
                    {detail}
                </div>
            );      
        }

        render() {
            return (
                <div>
                    <div>
                        {this.getDetail()}
                    </div>
                    <hr/>
                    <CategoryAddContent/>   
                </div>          
            );
        }
    }

    function mapStateToProps (state) {
        return {        
            categorySelected: state.categories.categorySelected 
        };  
    }
    export default connect(mapStateToProps)(CategoryDetail);

当我控制日志&#34; getdetail here&#34;我提交新内容时不会打印。这意味着组件未加载。但我不知道如何解决这个问题。

然后是CategoryAddContent组件

    class CategoryAddContent extends Component {

    constructor(props) {
        super(props);
        this.state = {title: "",};
        this.onSubmit = this.onSubmit.bind(this);
    }

    onSubmit(e){
        e.preventDefault();
        const contentData = {title: this.state.title};
        this.props.createCategoryContent(this.props.categorySelected, contentData);
        this.setState({title : ""});
    }

    render() {
        return (
            <div>
                <h3>Add content</h3>
                <form onSubmit={this.onSubmit}>
                    <div>
                        <label>name: </label> <br/>
                        <input
                            type="text" 
                            name="name" 
                            value={this.state.name}
                        />
                    </div>
                    <input 
                        type="submit" 
                        value="Submit" 
                    />
                </form>         
            </div>
        );
    }
}


// reducer
function mapStateToProps (state) {
    return {
        categorySelected: state.categories.categorySelected
    };  
}

export default connect(mapStateToProps, { createCategoryContent })(CategoryAddContent);

createCategoryContent

的动作创建者
export const createCategoryContent= (categoryContent, newContent) => dispatch => {
        categoryContent["content"] = [...categoryContent["content"], newContent];
        dispatch ({
            type: NEW_CATEGORY_CONTENT,
            payload: categoryContent
        })
    };

减速器在这里:

case NEW_CATEGORY_CONTENT:
    return {
        ...state,
        categorySelected: action.payload
    };

我们来了!

状态已更新,但组件未更新。

这是州:

categories
- categoryItems {//all categories here}
- categorySelected:id:"XX", name: "XX", slug:"XX", content:[0] // 1 array

categories
- categoryItems {//all categories here}
- categorySelected:id:"XX", name: "XX", slug:"XX", content:[0, 1] // 2 arrays

1 个答案:

答案 0 :(得分:0)

你能想到创建一个不同的功能,它可以对你的动作创建者进行提取。成功创建类别后,您可以调用已在操作创建者文件中声明的操作创建者。这可以最好地与承诺一起使用。