Question

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

这是Json：

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

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

路径＆＃34; / categories＆＃34; =类别列表
我点击类别，我被重定向到＆＃34; / categories / id＆＃34; =列表此类别的内容。

我正在尝试添加内容。当我添加内容（＆＃34;标题＆＃34;）时，我的状态会更新，但我的组件却没有。

这是我的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>
);

CategoryDetail组件

    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

Answer 1

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

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

1 个答案: