单击箭头时,购物车项视图需要展开该特定视图并折叠当前展开的其他视图。该产品的项id被传递给父组件,以更新要展开的视图(活动的)。虽然id是在reducer中的expandedItem属性上传递和设置的,但它不会更新到子组件(即使它是作为prop在子组件上传递的)。当在最后重新计算子组件时,expandedViewItem仍然为0,这是它的默认值。有人知道如何让子组件接收更新的expandedItem值吗?为什么还是0??
请观看我调试此问题时制作的视频:https://youtu.be/qegxqaywdpy
render () {
const isExpanded = product.id === this.props.expandedViewId;
export default class CartProductItem extends Component {
constructor(props) {
super(props);
this.state = {showCounter: false};
}
expandCartProductItem(id) {
this.props.onExpandClick(id);
this.setState(this.state);
}
updateDisplay = (nextProps) => {
// Null check is needed here as 0 is a valid value
if (nextProps.activeIndex !== null && nextProps.activeIndex === this.props.index) {
this.setState({
showCounter: !this.state.showCounter
});
} else if (nextProps.activeIndex !== null && nextProps.activeIndex !== this.props.index) {
this.setState({
showCounter: false
});
}
}
componentWillReceiveProps(nextProps) {
console.log('nextProps: ', nextProps)
}
render() {
const serverUrl = getServerAddress();
const {product} = this.props;
const price = product.iogmodPrice ? product.iogmodPrice : product.price;
const isExpanded = product.id === this.props.expandedViewId;
const imageSrc = product.imageName
? 'https://b2b.martinsmart.com/productimages/'+ product.imageName.replace("Original", "Thumbnail")
: serverUrl + '/b2b/resources/images/nophoto.gif';
return (
<View style={styles.pContainer}>
<CartProduct
imageName={imageSrc}
name={product.description}
itemNum={product.id}
price={price}
pack={product.pack}
averageWeight={product.averageWeight}
cases={product.order_count}
/>
<TouchableOpacity style={styles.buttonContainer} onPress={() => this.expandCartProductItem(product.id)}>
{isExpanded ? <LineIcon name="arrow-up" style={styles.arrowIcon} /> : <LineIcon name="arrow-down" style={styles.arrowIcon} />}
</TouchableOpacity>
{isExpanded &&
<ExpandHeightView height={70}>
<View style={styles.counterContainerView}>
<QuantityCounter style={{width: '100%'}} product={product} />
</View>
</ExpandHeightView>
}
</View>
);
}
}
expandAndCollapseItems = (id) => {
this.props.dispatch(collapseCartItemViews(id));
}
render() {
const {isLoading, displayDetails, sortCasesAsc, details, items, expandedItem} = this.props.orderInfo;
<FlatList
data={items}
keyExtractor={(item, index) => item.id.toString()}
renderItem={({item}) => <CartProductItem product={item} expandedViewId={expandedItem} onExpandClick={(id) => this.expandAndCollapseItems(id)} />}
/>
最后,这里是reducer函数更新应用程序状态:
case types.SET_EXPANDED_STATE:
const id = action.id;
return {
...state,
expandedItem: id
}
由于您使用的是redux,您可以从子级的redux存储中获取展开的项id,而不是从父级传递它。
假设我的父组件有两个子组件: 我从Child2获得一个输入,并将其传递给父组件(到目前为止,我知道该怎么做)。但是,我需要将该输入传递给Child1,以更新它的状态。 我怎么能那么做?
下面有一个子组件,我正在尝试更新父组件中的。我已经尝试了几个迭代,但没有运气。
问题内容: 我有两个组件: 父组件 ,我想从中更改子组件的状态: 和 子组件 : 我需要从父组件更改子组件的 打开 状态,还是单击父组件中的按钮时从父组件调用子组件的 toggleMenu() ? 问题答案: 状态应在父组件中进行管理。您可以通过添加属性将值传输到子组件。
我创建了一个包含登录组件和注册组件的签名页面组件。我的问题是,我如何传递一个onhtml函数从父到子,以便更改我的父组件(签名页组件)的状态?我期望的是,通过单击子组件中的按钮,可以切换父组件的活动状态,并根据活动状态更改样式。我试图通过一个处理功能从父到子,但它不能很好地工作。 有什么解决办法吗? codesandbox中的详细信息:https://codesandbox.io/s/wizard
我对JS的反应有点陌生。我有两个问题。我来了 现在我要做的是,当应用程序组件挂载时,我生成一个对后端服务器的ajax调用,当它返回时,它更新道具,并设置状态,这样子组件也会重新呈现,但子组件不会重新呈现。谁能告诉我出了什么问题。 问题2 现在让我们假设我将进入组件二路由,它将呈现组件二,我在应用程序组件中生成一个ajax调用,根据ajax调用返回的数据,我在应用程序组件中设置了一些道具,我还希望组
我正在学习如何应对,我整天都在试图找到解决问题的办法,但都没有成功。然后决定在这里提出我的第一个问题。 我有子组件,包括React-Datepicker组件和单独的“第二天”和“前一天”按钮来更改选定的日期。 SelectedDate存储在父组件的状态中。 我试图从子组件更新父组件的状态,当状态更新时,子组件应该重新呈现,因为该状态作为道具传递给同一个子组件。 我已设法从child更改父状态,但子