React识别嵌套状态更新时遇到问题。我已阅读excellent responses here，但仍有疑问。
我可以确认状态更改已在我的组件中进行并且可以识别。我唯一看不到的是React更新树，我读过的书通常意味着React无法识别我的状态更新（仅查找浅表副本）。但是，React确实更新了树，足以触发我的使用者中的console.log()更新。
也许我没有在正确的位置绑定某些东西？我的消费者也很热情，但可以正常工作。同时开放重构选项。
FilterContext：
import React from 'react';
export const FilterContext = React.createContext();
class FilterProvider extends React.Component {
constructor(props) {
super(props);
this.toggleEuphoric = () => {
this.setState(prevState => ({
...prevState,
emotions: {
...prevState.emotions,
anxious: false,
aroused: false,
calm: false,
cerebral: false,
creative: false,
energetic: false,
euphoric: true,
focused: false,
giggly: false,
happy: false,
hungry: false,
meditative: false,
mellow: false,
noemotion: false,
relaxed: false,
sleepy: false,
talkative: false,
tingly: false,
uplifted: false,
}
}))
},
this.state = {
emotions: {
anxious: null,
aroused: null,
calm: null,
cerebral: null,
creative: null,
energetic: null,
euphoric: null,
focused: null,
giggly: null,
happy: null,
hungry: null,
meditative: null,
mellow: null,
noemotion: null,
relaxed: null,
sleepy: null,
talkative: null,
tingly: null,
uplifted: null,
},
toggleEuphoric: this.toggleEuphoric,
}
}
render() {
return (
<FilterContext.Provider value={ this.state }>
{ this.props.children }
</FilterContext.Provider>
)
}
}
export default FilterProvider;
过滤器使用者：
<FilterContext.Consumer>
{ filterToggle => (
// Check the emotions part of the FilterContext state object
// If all options are null, it means no interactions have taken place
// So we show all results using .map() over the pageContext.productData array coming out of gatsby-node.js
Object.values(filterToggle.emotions).every(item => item === null) ? (
this.props.pageContext.productData.map( (product) => {
return <ProductListItem
desc={ product.shortDescription }
handle={ product.handle }
image={ product.image }
key={ product.id }
productType={ product.productType }
strain={ product.strain }
tac={ product.tac }
tags={ product.tags }
title={ product.title }
/>
})
) : (this.props.pageContext.productData.map( product => {
emotion = Object.keys(filterToggle.emotions).find(key => filterToggle.emotions[key])
return product.tags.forEach( (tag) => {
tag.toLowerCase() === emotion &&
console.log(this),
<ProductListItem
desc={ product.shortDescription }
handle={ product.handle }
image={ product.image }
key={ product.id }
productType={ product.productType }
strain={ product.strain }
tac={ product.tac }
tags={ product.tags }
title={ product.title }
/>
}
)
}))
)}
</FilterContext.Consumer>
答案 0 :(得分：1)
状态更新不是问题-状态正在更新，如问题所示。我的问题出在我的提供程序中，我以前曾尝试在forEach()数组的return上执行.map()。
突破有两个方面：发现.includes()方法是第一部分。在我的问题中，处理.forEach()内的条件条件并不是一个开门红（并且很可能为什么DOM中什么都没有出现）。 .includes()本质上是隐藏的条件语句（此数组是否包含X的任何一个？），因此在.filter()内部使用它可以实现相同的目的。
第二个突破是将数组方法链接在一起（请参见gomakethings，尤其是.filter()和.map()）。我没意识到.filter()并没有将数组返回到DOM，所以我需要将.map()链接到它以显示结果。
我的新消费者，评论很多：
<FilterContext.Consumer>
{ filterToggle => (
console.log( ),
/**
* ==================
* No filters active
* ==================
* filterToggle gives us access to the context state object in FilterContext
* filterToggle.emotion is a nested object inside of state, which is bad practice but we need it
* Our filters have three states: null (initial), true if active, false when others are active
* This first line of code iterated through the filterToggle.emotions with Object.values
* .every() takes each value and looks to make sure all of them are null
* Using a ternary, if all emotions are null, we know to load all product objects into the DOM
* We pass them all down to ProductListItem component with a .map on productData coming out of gatsby-node.js
*
* ==================
* Filters active
* ==================
* If all the filterEmotions aren't null, that means some filter has been engaged
* .filter() is then used to filter down the list of products
* It's basically returning an array after checking a condition
* In our case, we want to see if the product.tags part of productData contains the active filter
* But how? Well, each filter has a key with it's name (like anxious, euphoric, etc)
* So we can run Object.keys(filterToggle.emotions) to get all the keys
* Then we run .find() over the keys, basically looking for the true one, which means that filter is engaged
* If that whole mess is true, we know the active filter and the current product in the array match
* That means the filter has found the right item and we want to display it
* To do the display, we have to pass that array over to a .map()
* .map() returns the filteredProducts straight into ProductListItem, iterating through each one
*/
Object.values(filterToggle.emotions).every(item => item === null) ? (
this.props.pageContext.productData.map( (product) => {
return <ProductListItem
desc={ product.shortDescription }
handle={ product.handle }
image={ product.image }
key={ product.id }
productType={ product.productType }
strain={ product.strain }
tac={ product.tac }
tags={ product.tags }
title={ product.title }
/>
})
) : this.props.pageContext.productData.filter( (product) => {
return product.tags.includes(
Object.keys( filterToggle.emotions )
.find(key => filterToggle.emotions[key])) === true
}).map( (filteredProduct) => {
return <ProductListItem
desc={ filteredProduct.shortDescription }
handle={ filteredProduct.handle }
image={ filteredProduct.image }
key={ filteredProduct.id }
productType={ filteredProduct.productType }
strain={ filteredProduct.strain }
tac={ filteredProduct.tac }
tags={ filteredProduct.tags }
title={ filteredProduct.title }
/>
})
)}
</FilterContext.Consumer>