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

Question

我正在使用 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);

当我提交新内容时，没有打印控制台日志“getdetail here”。这意味着该组件未加载。但我不知道如何解决这个问题。

然后是 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

Answer 1

您能否考虑创建一个不同的函数来获取您的动作创建者。成功创建类别后，您可以调用您在动作创建者文件中声明的动作创建者。这可以最好地与 Promise 一起使用。