React Native Redux 不更新数组

Question

添加项目屏幕

export class additem extends Component {
constructor(props) {
super(props);
this.state = {
name: "",
price: "",
category: "",
};
}
submitItem = (name, price, category) => {
this.props.navigation.navigate("ItemList", {
item: {
name: name,
price: price,
category: category,
}});
};
render(){
return(

<View>
<TextInput onChangeText={(name) => this.setState({ name })}/>
<TextInput onChangeText={(price) => this.setState({ price })}/>
<TextInput onChangeText={(category) => this.setState({ category })}/>
<Button onPress={() => this.submitItem(
this.state.name,
this.state.price,
this.state.category,
)}/>
</View>
)}

列表项目屏幕

import {connect} from 'react-redux';
class ItemList extends Component {
constructor(props) {
super(props);
this.state = {
itemList:[],
};
}
static getDerivedStateFromProps(props, state) {
if (props.route.params?.item) {
props.dispatch({type:'ADD_ITEM'}); 
}
return null;
}


render() {

return (
<FlatList
data={this.props.itemList}
contentContainerStyle={{ flexGrow: 1 , flexGrow: hp('20%')}}
renderItem={({ item }) => (
<View> 
///output from flatlist
</View>
)}/>
);
}
}
function mapStateToProps(store){
return{
itemList: store.userState.itemList,
};
}
export default connect(mapStateToProps)(ItemList);

REDUX屏幕减缩器

import { USER_STATE_CHANGE } from "../constants";
const initialState = {
currentUser: null,
itemList: [],
};
export const user = (state = initialState, action) => {
switch (action.type){
case USER_STATE_CHANGE:
return {
...state,
currentUser: action.currentUser,
};
case 'ADD_ITEM': 
return{
item: state.itemList,
}
default:
return state
}

};

你好，我正在学习React-Redux，遇到了一个问题。该应用程序的目标是从添加商品屏幕添加杂货，一旦我用Button提交它，它就会将我发送到商品列表页面。

到达那里后，我使用static getDerivedStateFromProps检查阵列是否已发送，并使用Redux更新Reducers页面中的全局状态，最后在Flatlist中显示结果。

问题是，当我运行代码时，它会打印错误Cannot update a component from inside the function body of a different component。

Answer 1

您应该从addItem文件中调度一个操作。

你可以在存储中使两个变量相加，例如"；加载"；并且就在调度动作"之前；addItem"通过调用另一个操作将该变量设置为true并且在成功添加项目后，使加载变量为假

在addItem组件中，在将加载设置为true后，监听加载是否为false，然后导航到下一个屏幕

在您的代码中，问题是您正在getDerivedState方法中调度一个操作(这似乎是问题所在(

或者你可以在小吃博览会上制作POC，这样我们就能更好地了解谢谢：(