反应/还原:状态已更新，但组件未刷新

Question

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

这是 Json：

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

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

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

我正在尝试添加内容。当我添加内容("标题"(时，我的状态会更新，但我的组件不会。

这是我的应用程序.js

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

"类别详细信息"组件

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

当我

控制台日志时，当我提交新内容时，不会打印"在此处获取详细信息"。这意味着未加载组件。但我不知道如何解决这个问题。

然后类别添加内容组件

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

创建

类别内容的动作创建者

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

Answer 1

你能想到创建一个不同的函数来获取你的动作创建者吗？成功创建类别后，您可以调用在操作创建者文件中声明的操作创建者。这可以最好地与承诺一起使用。