在我的项目中,在使用 .map()
循环数据文件时函数,我从父组件 updatestate
传递一个函数 ( App
) ,给 child ,Main
,允许子进程调用 .setState()
并追加到处于 Parent 状态的数组中。
但是,当我调用此函数来设置父项的状态时,映射部分 -- {contents}
-- 不会重新渲染,除非我再次点击屏幕。
有什么想法吗?我是否缺少一些绑定(bind)或需要执行一些 componentDidMount 或其他操作?我尝试添加 this.forceUpdate()
在 eventHandler 内部,但 **映射 {contents}
** 部分仍然不会自动渲染。
const RootStack = StackNavigator(
{
Main: {
screen: Main}
}
);
export default class App extends Component<{}> {
constructor(props) {
super(props);
this.state = {
favoritesList: []
};
}
updateArr=(itemname, url)=>{this.setState({ favoritesList: [...this.state.favoritesList, {"item_name":itemname, "url":url}]})};
render() {
return <RootStack screenProps={{appstate: this.state,
updatestate: this.updateArr}}
/>;
}
}
class Main extends React.Component {
render() {
var updatestate = this.props.screenProps.updatestate;
//collection is the data (local JSON) i'm looping thru via .map in Main Component
const contents = collection.map((item, index) => {
return (
<Card key={index}
onSwipedRight={() => {updatestate(item.item_name,item.url)}}
>
<View> //THIS and anything after <Card> doesn't render for the next card automatically if I do 'onSwipedRight'
<Image
source={{uri: item.url}} />
</View>
</Card>
)
},this);
return (
<View>
<CardStack>
{contents} //THIS IS THE PART THAT WON'T AUTO-RERENDER AFTER THE EVENT HANDLER THAT SETS THE PARENT'S STATE
</CardStack>
</View>
);
}
}
为了确保这不是事件处理程序的问题,我添加了一个不设置父级状态的函数,并且有 <Card>
在事件处理程序上调用它——它工作得很好,子组件 <Card>
完美呈现。好像是updatestate
函数从父级传递到子级,用于调用 .setState()
上游由于某种原因导致子进程无法渲染/未完成渲染映射的{contents}
在事件处理程序之后。
class Main extends React.Component {
render() {
var updatestate = this.props.screenProps.updatestate;
var newfunc = (a, b) => {console.log('a:', a, 'b:', b)};
const contents = collection.map((item, index) => {
return (
<Card key={index}
newfunc(item.item_name,item.item_name);}}
// onSwipedRight={() => {updatestate(item.item_name,item.url); }}
>
最佳答案
尝试像这样重写你的 setState
import { InteractionManager } from "react-native";
updateArr = (itemname, url) => {
InteractionManager.runAfterInteractions(() => {
this.setState( prevState => ({
favoritesList: [...prevState.favoritesList, { "item_name":itemname, "url":url } ]
});
});
}
// add this line to your parent component constructor()
this.updateArr = this.updateArr.bind(this);
此外,我建议您将 React.Component 更改为 React.PureComponent,相反,它将为您处理浅层状态更改并提高性能。 供引用React.Component vs React.PureComponent
关于javascript - React Native - 在子事件处理程序更新父状态后,子中的 .Map() 项目不会重新渲染,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48979782/