我目前正在学习react-redux并开发一个简单的应用程序。当我要创建新类别时,记录会保存与下面相同的category_id。
categories
-KpKwhwyuXtq1uFkE56K
category_id: "1"
desc: "title 1 desc"
title: "title 1"
-KpL2mWBrzP_36wrDQs6
category_id: "1"
desc: "title 2 desc"
title: "title 2"
-KpLHaNkSNbqimTJ59Mi
category_id: "1"
desc: "title 3 desc"
title: "title 3"
这里category_id需要是唯一的。我使用了以下解决方案,但无法获得唯一的category_id。
CategoryNew.jsx:
handleUpdate(event) {
event.preventDefault();
var title = this.title.value.trim();
var desc = this.desc.value.trim();
this.props.categoryUpdate({
title: title,
desc: desc
}, this.props.match.params.category_id);
this.title.value = "";
this.desc.value = "";
setTimeout(function () { window.location.replace("/"); }, 10)
}
render() {
const { categoriesId, categories } = this.props;
var categoriesArr = categoriesId.map(id => (Object.assign({}, categories[id], {category_id: id})))
console.log('Category ids array', categoriesArr);
var category_id = this.state.category_id;
var title = this.props.categories.title;
var desc = this.props.categories.desc;
return (
<Panel>
<form onSubmit={ category_id ? this.handleUpdate.bind(this) : this.handleSubmit.bind(this)}>
<h3>{category_id ? "Edit category" : "Create a New Category"}</h3>
<FormGroup controlId="formControlsText">
<ControlLabel>Title</ControlLabel>
<FormControl
type="text"
inputRef={ref => {
this.title = ref;
}}
placeholder="Enter title"
defaultValue={title}
/>
</FormGroup>
<FormGroup controlId="formControlsTextarea">
<ControlLabel>Description</ControlLabel>
<FormControl
type="textarea"
defaultValue={desc}
inputRef={ref => {
this.desc = ref;
}}
placeholder="Enter description"
/>
</FormGroup>
<Button className="btn-primary" type="submit">
{category_id ? "Update" : "Submit"}
</Button>
<span> </span>
<Link to="/" className="btn btn-danger">Cancel </Link>
</form>
</Panel>
);
}
}
unction mapStateToProps(state) {
return {
categoriesId: state.categoriesState.ids,
categories: state.categoriesState.categories,
//categories: state.categoriesState.selectedCategory,
formloaded: state.postsState.formloaded
};
}
export default connect(mapStateToProps, {
newCategoryCreate,
selectedCategory,
categoryUpdate
})(CategoriesNew);
reducer.jsx:
import * as actionTypes from './actionTypes';
const INITIAL_STATE = {
ids: [],
categories: {},
selected_category: {},
isFetchingCategories: false,
isFetchingSingleCategories: false,
formloaded: false
};
case actionTypes.CREATE_CATEGORIES:
return { ...state };
case actionTypes.CREATE_CATEGORY_SUCCESS:
return { ...state,formloaded: true };
epics.jsx:
import AdminService from '../../../app/admin/services/AdminService';
import * as actionTypes from './actionTypes';
import * as categoryActions from './actions';
export const newCategoryCreate = (action$,{ getJSON } ) => {
return action$.ofType(actionTypes.CREATE_CATEGORIES)
.map( action => action.payload)
.switchMap((category) => AdminService.categorySubmit(category))
.map(category => categoryActions.fetchCategoriesSuccess(Object.values(category)))
}
actions.jsx:
import * as actionTypes from './actionTypes';
export function newCategoryCreate(props) {
return {
type: actionTypes.CREATE_CATEGORIES,
payload: props
};
}
export function newCategoryCreateSuccess(props) {
return {
type: actionTypes.CREATE_CATEGORY_SUCCESS,
payload: props
};
}
AdminService.jsx:
static categorySubmit(category){
var firebaseRef = firebase.database().ref('categories');
firebaseRef.push(category);
this.getCategories();
return Observable.of(category);
}
请建议我哪里出错了以及如何解决这个问题。提前谢谢。