gpt4 book ai didi

node.js - 加载数据后响应更新组件

转载 作者:太空宇宙 更新时间:2023-11-03 22:58:20 26 4
gpt4 key购买 nike

所以我有一个显示 firestore 中的类别的组件,该组件第一次不显示任何内容,但是当我再次单击导航栏按钮时,它确实显示了 firestore 中存储的数据。

这是组件文件:

import * as React from "react";
import Category from "./Category";
import connect from "react-redux/es/connect/connect";
import {getCategories} from "../reducers/actions/categoryAction";

class CategoriesList extends React.Component{
constructor(props) {
super(props);
this.state = ({
categoriesList: [{}]
})
}

componentWillMount() {
this.props.getCategories();
this.setState({categoriesList: this.props.categories});
this.forceUpdate();
}

render() {
return (
<div className={'container categories'}>
<div className={'row center'} onClick={() => this.props.history.push('/addcategories')}>
<div className={'col s24 m12'}>
<p>Create New Category</p>
</div>
</div>

<div className={'row'}>
<div className={'col s24 m12'}>
{/*{() => this.renderCategories()}*/}


{this.state.categoriesList && this.state.categoriesList.map(category => {
return <Category category={category} key={category.id}/>
})}
</div>
</div>
</div>
);
}
}

const mapDisptachToProps = (dispatch) => {
return {
getCategories: () => dispatch(getCategories()),
}
};

const mapStateToProps = (state) => {
return {
categories: state.category.categories
}
};

export default connect(mapStateToProps, mapDisptachToProps)(CategoriesList)

这是 reducer 文件:

 import db from '../firebaseConfig'


const initState = {
categories: []
};

const categoryReducer = (state=initState, action) => {
switch (action.type) {
case 'CREATE_CATEGORY':
db.collection("Categories").add({
category: action.category.name
})
.then(function(docRef) {
db.collection("Categories").get().then((querySnapshot) => {
querySnapshot.forEach((doc) => {
// console.log(`${doc.id} => ${doc.data().category}`);
if(doc.id === docRef.id) {
state.categories.push({id: doc.id, name: doc.data().category});
console.log(state.categories)
}
});
});
})
.catch(function(error) {
console.error("Error adding document: ", error);
});
break;

case 'GET_CATEGORIES':
console.log('Getting data from firestore');

db.collection("Categories").get().then((querySnapshot) => {
if(state.categories.length !== querySnapshot.size) {
querySnapshot.forEach((doc) => {
state.categories.push({id: doc.id, name: doc.data().category});
});
}
});
break;
}
return state;
};

export default categoryReducer

有没有办法在完全加载数据后更新组件?或者加载 initalState 中所有数据的方法?

最佳答案

有几件事需要理解。第一,this.props.getCategories()执行本质上异步的操作,因此在下一行 this.setState({categoriesList: this.props.categories}); ,我们将得不到所需的数据。

其次,在不进行任何修改的情况下将 props 存储到 state 是没有必要的,并且会导致复杂化。所以尽量直接使用 Prop 而不存储它。如果您要修改获得的 props,请确保覆盖 getDerivedStateFromProps适本地。

第三,尝试使用componentDidMount执行比componentWillMount这样的异步操作。请参阅when to use componentWillMount instead of componentDidMount .

第四(对您的情况很重要),Reducer不应包含异步操作。 Reducer 应该是一个同步操作,它将返回一个新的状态。在您的情况下,您需要在其他地方获取数据,然后 dispatch在您的db.collection(..).then回调。您还可以使用redux-thunk ,如果您使用太多异步操作来更新您的 redux。

因此,如果您遵循在 reducer 中返回新状态的第四点,而不是直接在 db().then 中改变 redux,@Mis94 答案应该有效。 callback

关于node.js - 加载数据后响应更新组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53934693/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com