[英]ReactJS Modifying this.props data with a function and storing it into a class variable (like RoR setter)
我的react組件中有一個集合哈希數組,以這種格式存儲在this.props.collections內部:
[{id: 1, title: 'sunglasses', other_data: 'yougetthepoint'},{hash2}..etc}]
我想使用以下函數將此格式轉換為單個哈希
{ 'sunglasses': 1, 'necklaces': 2, etc}.
如何將其存儲到我的react組件中,以便可以查找每個標題的ID? 我認為這將類似於紅寶石在路軌上的二傳手。
function CollectionHash(){
var obj = this.props.collections.reduce(function ( total, current ) {
total[ current.title ] = current.id;
return total;
}, {});
return obj;
}
完整的React組件
class ProductIndexPage extends React.Component {
constructor(props) {
super(props);
this.state = {
term: '',
collection_id: null,
products: this.props.products,
};
this.handleTermChange = this.handleTermChange.bind(this);
this.handleCollectionChange = this.handleCollectionChange.bind(this);
}
handleTermChange(event) {
this.setState({term: event}, () => {
this.searchProducts()
});
}
handleCollectionChange(event) {
console.log('Handle Collection')
console.log(this.collection_hash)
console.log(event)
this.setState({collection_id: event}, () => {
this.searchProducts()
});
}
render() {
function CreateItem(product) {
return {
url: '/products/' + product.id,
attributeOne: product.title,
attributeTwo: product.variants[0].variant_price,
attributeThree: '5 prices from $8.99 to $13.99',
media: <Thumbnail
source={product.main_image_src}
alt={product.title}
size="small"
/>
}
}
function CollectionTitles(collection) {
return collection.title
}
function CollectionHash(){
var obj = this.props.collections.reduce(function ( total, current ) {
total[ current.title ] = current.id;
return total;
}, {});
return obj;
}
return (
<Layout>
<Layout.Section>
<Card title="Online store dashboard" actions={[{content: 'Edit'}]} sectioned>
<Card.Section>
<Stack>
<TextField
value={this.state.term}
label="Keyword Search"
placeholder="Enter Term"
onChange={this.handleTermChange}
/>
<Select
value= {this.state.collection_id}
label="Collection"
options={ this.props.collections.map(CollectionTitles) }
placeholder="Select"
onChange={this.handleCollectionChange}
//onChange={this.valueUpdater('collection')}
//onChange={this.searchProducts('collection')}
/>
</Stack>
</Card.Section>
<Card.Section>
<ResourceList
items={
this.state.products.map(CreateItem)
}
renderItem={(item, index) => {
return <ResourceList.Item key={index} {...item} className='Polaris-Card' />;
}}
/>
</Card.Section>
</Card>
</Layout.Section>
</Layout>
);
}
searchProducts() {
console.log('/products/' + "?term=" + this.state.term + "&collection=" + this.state.collection_id)
$.ajax( {
url: '/products/' + "?term=" + this.state.term + "&collection=" + this.state.collection_id,
dataType: 'json',
success: function(data) {
this.setState({ products: data });
}.bind(this),
error: function(data) {
}.bind(this)
});
}
您的意思是如何使用javascript拼合數據嗎? 如果是這樣,你可以簡單地做到這一點
let flatten = {};
(product).forEach((x)=>{
flatten[x.title] = x.id;
});
為了使它在整個組件中都可訪問,可以將局部變量“拉平”暴露給this.state或類似的方法
最好的祝福,
約翰·傑里科
原來,我不得不將其作為this.variable_name而不是var名稱存儲在構造函數中,而且我不能只是將函數放在構造函數之外並調用它並將其存儲在var變量= CollectionHash()中。 請參閱下面的解決方案:
class ProductIndexPage extends React.Component {
constructor(props) {
super(props);
this.state = {
term: '',
collection_id: null,
products: this.props.products,
};
this.handleTermChange = this.handleTermChange.bind(this);
this.handleCollectionChange = this.handleCollectionChange.bind(this);
this.col_hash = this.props.collections.reduce(function ( total, current ) {
total[ current.title ] = current.id;
return total;
}, {});
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.