- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我有一个组件给我带来了以下问题:
测试步骤:
预期结果:
仍应选择第一个参与问题的答案。
实际结果:
未选择。
因此,问题似乎是更新父级上某些状态的回调,但父级没有将 yes/no 属性传递给该组件,并且正在卸载它以节省渲染时间。
在后端的数据库中,答案会被记录,但不会保留在用户界面中。我注意到下面的辅助函数,特别是 this.props.onPress()
返回 undefined
。
class GetInvolvedFeedCard extends PureComponent {
static propTypes = {
onPress: PropTypes.func.isRequired,
style: PropTypes.oneOfType([PropTypes.number, PropTypes.object]),
title: PropTypes.string.isRequired
};
constructor(props) {
super(props);
const helper = `${
this.props.title.endsWith("?") ? "" : "."
} Your NFIB preferences will be updated.`;
this.state = {
noSelected: false,
yesSelected: false,
helper
};
}
_accept = () => {
this.setState({ yesSelected: true, noSelected: false }, () => {
this.props.onPress(true);
});
};
_decline = () => {
this.setState({ noSelected: true, yesSelected: false }, () => {
this.props.onPress(false);
});
};
render() {
return (
<Card style={this.props.style}>
<View style={feedContentStyles.header}>
<View style={feedContentStyles.contentType}>
<Text style={feedContentStyles.title}>{"GET INVOLVED"}</Text>
</View>
</View>
<Divider />
<View style={feedContentStyles.content}>
<View style={styles.content}>
<Text style={styles.blackTitle}>
{this.props.title}
<Text style={styles.italicText}>{this.state.helper}</Text>
</Text>
</View>
<View style={styles.footer}>
<TouchableOpacity onPress={this._decline}>
<Text
style={[
styles.btnText,
styles.noBtn,
this.state.noSelected ? styles.selected : null
]}
>
{"NO"}
</Text>
</TouchableOpacity>
<TouchableOpacity onPress={this._accept}>
<Text
style={[
styles.btnText,
this.state.yesSelected ? styles.selected : null
]}
>
{"YES"}
</Text>
</TouchableOpacity>
</View>
</View>
</Card>
);
}
}
因此,状态似乎是由父组件管理的,而不是 Redux。
不清楚的是,它是否正在卸载定义onPress
的组件。听起来确实是这样。
只是滚动,所以有一个由卡片组成的事件提要,其中一些卡片呈现 bool 类型问题
do you want to get involved? no yes
当用户选择任一响应,然后向下滚动一定数量,然后向上滚动回到同一问题时,就好像用户从未回答过它一样。我注意到,当用户选择“否”时,仅当用户选择"is"时,_handleGetInvolved 函数中的 this.props.handleUpdateGetInvolved({volved: items }) 才不会被触发。引用此:
_handleGetInvolved = (response, entity) => {
if (response !== entity.IsSelected) {
const isTopic = entity.Category !== "GetInvolved";
const items = [
{
...entity,
IsSelected: response
}
];
if (isTopic) {
this.props.handleUpdateTopics({ topics: items });
} else {
this.props.handleUpdateGetInvolved({ involved: items });
}
}
};
每个答案的辅助函数本身始终在 GetInvolvedFeedCard
组件内返回 undefined:
_accept = () => {
this.setState({ yesSelected: true, noSelected: false }, () => {
this.props.onPress(true);
console.log(
"this is the accept helper function: ",
this.props.onPress(true)
);
});
};
_decline = () => {
this.setState({ noSelected: true, yesSelected: false }, () => {
this.props.onPress(false);
console.log(
"this is the decline helper function: ",
this.props.onPress(false)
);
});
};
render() {
return (
<Card style={this.props.style}>
<View style={feedContentStyles.header}>
<View style={feedContentStyles.contentType}>
<Text style={feedContentStyles.title}>{"GET INVOLVED"}</Text>
</View>
</View>
<Divider />
<View style={feedContentStyles.content}>
<View style={styles.content}>
<Text style={styles.blackTitle}>
{this.props.title}
<Text style={styles.italicText}>{this.state.helper}</Text>
</Text>
</View>
<View style={styles.footer}>
<TouchableOpacity onPress={this._decline}>
<Text
style={[
styles.btnText,
styles.noBtn,
this.state.noSelected ? styles.selected : null
]}
>
{"NO"}
</Text>
</TouchableOpacity>
<TouchableOpacity onPress={this._accept}>
<Text
style={[
styles.btnText,
this.state.yesSelected ? styles.selected : null
]}
>
{"YES"}
</Text>
</TouchableOpacity>
</View>
如果我没记错的话,所有这些都是由 ActivityFeed
组件整体呈现的:
const { height } = Dimensions.get("window");
export class ActivityFeed extends PureComponent {
static propTypes = {
displayAlert: PropTypes.bool,
feed: PropTypes.array,
fetchFeed: PropTypes.func,
getCampaignDetails: PropTypes.func,
handleContentSwipe: PropTypes.func,
handleUpdateGetInvoved: PropTypes.func,
handleUpdateTopics: PropTypes.func,
hideUndoAlert: PropTypes.func,
lastSwippedElement: PropTypes.object,
loading: PropTypes.bool,
navigation: PropTypes.object,
setSelectedAlert: PropTypes.func,
setSelectedArticle: PropTypes.func,
setSelectedEvent: PropTypes.func,
setSelectedSurvey: PropTypes.func.isRequired,
undoSwipeAction: PropTypes.func,
userEmailIsValidForVoterVoice: PropTypes.bool
};
constructor(props) {
super(props);
this.prompted = false;
this.state = {
refreshing: false,
appState: AppState.currentState
};
}
async componentDidMount() {
AppState.addEventListener("change", this._handleAppStateChange);
if (!this.props.loading) {
const doRefresh = await cache.shouldRefresh("feed");
if (this.props.feed.length === 0 || doRefresh) {
this.props.fetchFeed();
}
cache.incrementAppViews();
}
}
componentWillUnmount() {
AppState.removeEventListener("change", this._handleAppStateChange);
}
_handleAppStateChange = async appState => {
if (
this.state.appState.match(/inactive|background/) &&
appState === "active"
) {
cache.incrementAppViews();
const doRefresh = await cache.shouldRefresh("feed");
if (doRefresh) {
this.props.fetchFeed();
}
}
this.setState({ appState });
};
_keyExtractor = ({ Entity }) =>
(Entity.Key || Entity.Id || Entity.CampaignId || Entity.Code).toString();
_gotoEvent = event => {
cache.setRouteStarter("MainDrawer");
this.props.setSelectedEvent(event);
const title = `${event.LegislatureType} Event`;
this.props.navigation.navigate("EventDetails", { title });
};
_gotoSurveyBallot = survey => {
cache.setRouteStarter("MainDrawer");
this.props.setSelectedSurvey(survey);
this.props.navigation.navigate("SurveyDetails");
};
_gotoArticle = article => {
cache.setRouteStarter("MainDrawer");
this.props.setSelectedArticle(article);
this.props.navigation.navigate("ArticleDetails");
};
_onAlertActionButtonPress = async item => {
cache.setRouteStarter("MainDrawer");
await this.props.setSelectedAlert(item.Entity);
this.props.getCampaignDetails();
if (this.props.userEmailIsValidForVoterVoice) {
this.props.navigation.navigate("Questionnaire");
} else {
this.props.navigation.navigate("UnconfirmedEmail");
}
};
_onSwipedOut = (swippedItem, index) => {
this.props.handleContentSwipe(this.props, { swippedItem, index });
};
_handleGetInvolved = (response, entity) => {
if (response !== entity.IsSelected) {
const isTopic = entity.Category !== "GetInvolved";
const items = [
{
...entity,
IsSelected: response
}
];
if (isTopic) {
this.props.handleUpdateTopics({ topics: items });
} else {
this.props.handleUpdateGetInvoved({ involved: items });
}
}
};
renderItem = ({ item, index }) => {
const { Type, Entity } = item;
if (Type === "EVENT") {
return (
<SwippableCard onSwipedOut={() => this._onSwipedOut(item, index)}>
<EventFeedCard
style={styles.push}
mainActionButtonPress={() => this._gotoEvent(Entity)}
event={Entity}
/>
</SwippableCard>
);
}
if (["SURVEY_SURVEY", "SURVEY_BALLOT"].includes(Type)) {
return (
<SwippableCard onSwipedOut={() => this._onSwipedOut(item, index)}>
<SurveyBallotFeedCard
style={styles.push}
survey={Entity}
handleViewDetails={() => this._gotoSurveyBallot(Entity)}
/>
</SwippableCard>
);
}
if (Type === "SURVEY_MICRO") {
return (
<SwippableCard onSwipedOut={() => this._onSwipedOut(item, index)}>
<MicroSurvey style={styles.push} selectedSurvey={Entity} />
</SwippableCard>
);
}
if (Type === "ALERT") {
return (
<SwippableCard onSwipedOut={() => this._onSwipedOut(item, index)}>
<ActionAlertFeedCard
datePosted={Entity.StartDateUtc}
style={styles.push}
title={Entity.Headline}
content={Entity.Alert}
mainActionButtonPress={() => this._onAlertActionButtonPress(item)}
secondaryActionButtonPress={() => {
this.props.setSelectedAlert(Entity);
// eslint-disable-next-line
this.props.navigation.navigate("ActionAlertDetails", {
content: Entity.Alert,
id: Entity.CampaignId,
title: Entity.Headline
});
}}
/>
</SwippableCard>
);
}
if (Type === "ARTICLE") {
return (
<SwippableCard onSwipedOut={() => this._onSwipedOut(item, index)}>
<ArticleFeedCard
content={Entity}
style={styles.push}
mainActionButtonPress={() => this._gotoArticle(Entity)}
/>
</SwippableCard>
);
}
//prettier-ignore
if (Type === 'NOTIFICATION' && Entity.Code === 'INDIVIDUAL_ADDRESS_HOME_MISSING') {
return (
<MissingAddressCard
style={styles.push}
navigate={() => this.props.navigation.navigate('HomeAddress')}
/>
);
}
if (["PREFERENCE_TOPIC", "PREFERENCE_INVOLVEMENT"].includes(Type)) {
return (
<SwippableCard onSwipedOut={() => this._onSwipedOut(item, index)}>
<GetInvolvedFeedCard
style={styles.push}
title={Entity.DisplayText}
onPress={response => this._handleGetInvolved(response, Entity)}
/>
</SwippableCard>
);
}
return null;
};
_onRefresh = async () => {
try {
this.setState({ refreshing: true });
this.props
.fetchFeed()
.then(() => {
this.setState({ refreshing: false });
})
.catch(() => {
this.setState({ refreshing: false });
});
} catch (e) {
this.setState({ refreshing: false });
}
};
_trackScroll = async event => {
try {
if (this.prompted) {
return;
}
const y = event.nativeEvent.contentOffset.y;
const scrollHeight = height * 0.8;
const page = Math.round(Math.floor(y) / scrollHeight);
const alert = await cache.shouldPromtpPushNotificationPermissions();
const iOS = Platform.OS === "ios";
if (alert && iOS && page > 1) {
this.prompted = true;
this._openPromptAlert();
}
} catch (e) {
return false;
}
};
_openPromptAlert = () => {
Alert.alert(
"Push Notifications Access",
"Stay engaged with NFIB on the issues and activities you care about by allowing us to notify you using push notifications",
[
{
text: "Deny",
onPress: () => {
cache.pushNotificationsPrompted();
},
style: "cancel"
},
{
text: "Allow",
onPress: () => {
OneSignal.registerForPushNotifications();
cache.pushNotificationsPrompted();
}
}
],
{ cancelable: false }
);
};
_getAlertTitle = () => {
const { lastSwippedElement } = this.props;
const { Type } = lastSwippedElement.swippedItem;
if (Type.startsWith("PREFERENCE")) {
return "Preference Dismissed";
}
switch (Type) {
case "EVENT":
return "Event Dismissed";
case "SURVEY_BALLOT":
return "Ballot Dismissed";
case "SURVEY_SURVEY":
return "Survey Dismissed";
case "SURVEY_MICRO":
return "Micro Survey Dismissed";
case "ARTICLE":
return "Article Dismissed";
case "ALERT":
return "Action Alert Dismissed";
default:
return "Dismissed";
}
};
render() {
if (this.props.loading && !this.state.refreshing) {
return <Loading />;
}
const contentStyles =
this.props.feed.length > 0 ? styles.content : emptyStateStyles.container;
return (
<View style={styles.container}>
<FlatList
contentContainerStyle={contentStyles}
showsVerticalScrollIndicator={false}
data={this.props.feed}
renderItem={this.renderItem}
keyExtractor={this._keyExtractor}
removeClippedSubviews={false}
onRefresh={this._onRefresh}
refreshing={this.state.refreshing}
ListEmptyComponent={() => (
<EmptyState navigation={this.props.navigation} />
)}
scrollEventThrottle={100}
onScroll={this._trackScroll}
/>
{this.props.displayAlert && (
<BottomAlert
title={this._getAlertTitle()}
onPress={this.props.undoSwipeAction}
hideAlert={this.props.hideUndoAlert}
/>
)}
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1
},
content: {
paddingHorizontal: scale(8),
paddingTop: scale(16),
paddingBottom: scale(20)
},
push: {
marginBottom: 16
}
});
const mapState2Props = ({
activityFeed,
auth: { userEmailIsValidForVoterVoice },
navigation
}) => {
return {
...activityFeed,
userEmailIsValidForVoterVoice,
loading: activityFeed.loading || navigation.deepLinkLoading
};
};
export default connect(mapState2Props, {
fetchFeed,
getCampaignDetails,
handleUpdateGetInvoved,
handleUpdateTopics,
setSelectedAlert,
setSelectedArticle,
setSelectedEvent,
setSelectedSurvey,
handleContentSwipe,
undoSwipeAction,
hideUndoAlert
})(ActivityFeed);
“参与其中”卡片如下所示:
因此,当用户单击否或是,然后将该卡滚动到远离 View 时,预期是当他们将该卡滚动回 View 时否 或 YES,无论选择哪一个,都应该仍然存在。
此外,仅当用户一直滚动到事件源底部然后返回时,所选答案才会消失,但如果用户仅滚动事件源卡的一半并返回到此“参与”卡,则选定的答案不会消失。
我相信下面的文章答案正是发生在我身上的事情: React Native - FlatList - Internal State .
因此,这里的答案似乎是将应用程序状态的答案作为 Prop 传递,并根据该 Prop 进行渲染,而不是卡的内部状态,但我不完全确定它是什么样子或如何把它放在一起。
constructor(props) {
super(props);
// const helper = `${
// this.props.title.endsWith("?") ? "" : "."
// } Your NFIB preferences will be updated.`;
this.state = {
noSelected: false,
yesSelected: false,
helper
};
}
_accept = () => {
this.setState({ yesSelected: true, noSelected: false }, () => {
this.props.onPress(true);
});
};
_decline = () => {
this.setState({ noSelected: true, yesSelected: false }, () => {
this.props.onPress(false);
});
};
with:
this.state = {
// noSelected: false,
// yesSelected: false,
// helper
cardSelectedStatus: []
};
with the idea of then implementing cardSelectedStatus in my mapStateToProps
function mapStateToProps(state) {
return {cardSelectedStatus: state.};
}
但后来我意识到我不确定我要传递什么,因为这个组件中没有涉及 Action 创建者,因此没有 reducer 那么如果这个组件中没有涉及 Action 创建者/ reducer ,我可以使用 mapStateToProps
吗?
利用mapStateToProps是我所知道的唯一方法,或者说这是我在将用户输入从应用程序状态作为 Prop 传递并基于该 Prop 而不是内部状态进行渲染方面拥有最多经验的方式。
最佳答案
我能猜到问题所在。问题是您正在使用诸如 FlatList
之类的东西。每次您在屏幕上滚动卡片,然后向后滚动时,它都会重新创建卡片。
所以有两种方法可以解决这个问题:
ScrollView
。它不会重新创建卡片 this.state = {
cardSelectedStatus: [], // array [true, false, true, ...]. Mean card 0: selected, card 1: no selected,...
...
};
然后你可以将状态传递给每张卡
关于javascript - 如何将应用程序状态的答案作为 Prop 而不是卡的内部状态传递,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58961946/
这是我的测试用例。 http://tobeythorn.com/isi/dummy2.svg http://tobeythorn.com/isi/isitest.html 如果我自己打开 svg,内部
这是我的测试用例。 http://tobeythorn.com/isi/dummy2.svg http://tobeythorn.com/isi/isitest.html 如果我自己打开 svg,内部
我正在尝试做类似的事情: SELECT SUM( CASE WHEN ( AND EXISTS(SELECT 1
我想问如何在外部 ng-repeat 内部正确使用内部 ng-repeat: 这意味着你想使用这样的东西: {{milestone.id}} {{
我希望在 wordpress 的仪表板内编辑 css 样式并且如果可能的话不必编辑 php 文件。 我知道至少可以编辑一些属性,所以我希望我可以直接在仪表板中编辑所有属性。 更具体地说如何更改自定义类
我在安装在 windows10 上的 vmware 中的 Ubuntu 上安装了伪分布式独立 hadoop 版本。 我从网上下载了一个文件,复制到ubuntu本地目录/lab/data 我在 ubun
我有一个如下所示的 WHERE 语句: WHERE ((@Value1 IS NULL AND [value1_id] IS NULL) OR [value1_id] = ISNULL(@Va
我有一个如下所示的 WHERE 语句: WHERE ((@Value1 IS NULL AND [value1_id] IS NULL) OR [value1_id] = ISNULL(@Va
在我的一些测试帮助程序代码中,我有一个名为 FakeDbSet(Of T) 的 IDbSet(Of T) 实现,它模拟了许多 EF 行为,但没有实际的数据库。我将类声明为 Friend ,因为我想强制
我正在寻找 Cassandra/CQL 的常见 SQL 习语 INSERT INTO ... SELECT ... FROM ... 的表亲。并且一直无法找到任何以编程方式或在 CQL 中执行此类操作
如何防止内部 while 循环无限运行?问题是,如果没有外部 while 循环,内部循环将毫无问题地运行。我知道它必须对外循环执行某些操作,但我无法弄清楚是什么导致了问题。 import java.u
我正在努力学习更多有关 C++ 的知识,但在国际象棋程序中遇到了一些代码,需要帮助才能理解。我有一个 union ,例如: union b_union { Bitboard b; st
这是我项目网页中的代码片段。这里我想显示用户选择的类别,然后想显示属于该类别的主题。在那里,用户可以拥有多个类别,这没有问题。我可以在第一个 while 循环中打印所有这些类别。问题是当我尝试打印主题
我想知道如何在 swing 中显示内部框架。这意味着,当需要 JFrame 时,通常我所做的是, new MyJFrame().setVisible(true); 假设之前的表单也应该显示。当显示这个
我最近发现了一些有趣的行为,这让我想知道对象如何知道存在哪些全局变量。例如,假设我有一个文件“test.py”: globalVar = 1 toDelete = 2 class Test(objec
我知道它已经在这里得到回答: google maps drag and drop objects into google maps from outside the Map ,但这并不完全是我所需要的
我目前正在学习Javascript DOM和innerHTML,发现在理解innerHTML方面存在一些问题。 这是我的代码:http://jsfiddle.net/hphchan/bfjx1w70/
我构建了一个布局如下的库: lib/ private_class_impl.cc private_class_decl.h public_class_impl.cc include/
我有一个使用 bootstrap 3 的组合 wordpress 网站。它基本上是一个图像网格。当屏幕展开时,它会从三列变为四列。移动时它是一列。 我想出了如何调整图像的顶部和底部边距,但我希望图像的
我正在试用 MSP-EXP430G2 的教程程序,使用 Code Composer Studio 使 LED 闪烁。最初,它有一个闪烁的无限循环: for(;;) // This emp
我是一名优秀的程序员,十分优秀!