好的，所以我的 possible_matches 控制器中有一个名为 setup_possible_matches 的操作，它呈现 json。
def setup_possible_matches
@contemplated_piece = @visible_gor_clothing || GorClothing.where(gender: :male).order(created_at: :desc).first
@standalone_bottoms = GorClothing.where('standalone = ?', true).where('merch_type = ?', 'bottom').where.not('id = ?', @contemplated_piece).where(gender: :male).order(created_at: :desc)
@standalone_tops = GorClothing.where('standalone = ?', true).where('merch_type = ?', 'top').where.not('id = ?', @contemplated_piece).where(gender: :male).order(created_at: :desc)
@suggested_tops = GorClothing.joins(:toggled_pieces).where('merch_type = ?', 'top').where('possible_matches.contemplated_piece_id = ?', @contemplated_piece.id).where(gender: :male).order(created_at: :desc)
@suggested_bottoms = GorClothing.joins(:toggled_pieces).where('merch_type = ?', 'bottom').where('possible_matches.contemplated_piece_id = ?', @contemplated_piece.id).where(gender: :male).order(created_at: :desc)
@extra_tops = GorClothing.joins(:toggled_pieces).where('merch_type = ?', 'top').where.not('possible_matches.contemplated_piece_id = ?', @contemplated_piece.id).where('standalone = ?', false).where(gender: :male).order(created_at: :desc)
@extra_bottoms = GorClothing.joins(:toggled_pieces).where('merch_type = ?', 'bottom').where.not('possible_matches.contemplated_piece_id = ?', @contemplated_piece.id).where('standalone = ?', false).where(gender: :male).order(created_at: :desc)
render json: {contemplated_piece: @contemplated_piece, standalone_tops: @standalone_tops, standalone_bottoms: @standalone_bottoms, suggested_tops: @suggested_tops, suggested_bottoms: @suggested_bottoms, extra_tops: @extra_tops, extra_bottoms: @extra_bottoms}
end
在 db/seeds.rb 中，我在 GorClothing 数据库中植入：
GorClothing.create(merch_type: 'top', description: 'Perfect for a night out with the boys', gender: 'male', sizes: 'M', colors_available: 'Gray', price: '$59.99', standalone: true, quantity: 5, images_attributes: [{type_of_image: 1, picture: File.open(File.join(Rails.root, 'app/assets/images/CoolNightClubShirt.png'))}])
GorClothing.create(merch_type: 'top', description: 'Bon Vivant', gender: 'male', sizes: 'M', colors_available: 'black', price: '$64.99', standalone: true, quantity: 6, images_attributes: [{type_of_image: 1, picture: File.open(File.join(Rails.root, 'app/assets/images/CoolPartyHostShirt.png'))}])
GorClothing.create(merch_type: 'top', description: 'At the beach bar ordering martinis; Learning how to salsa dance; This piece simply communicates that we are unbothered with the things that might weigh down others', gender: 'male', sizes: 'M', colors_available: 'black', price: '$64.99', standalone: true, quantity: 6, images_attributes: [{type_of_image: 1, picture: File.open(File.join(Rails.root, 'app/assets/images/CoolWhiteShirt.png'))}])
GorClothing.create(merch_type: 'top', description: 'To a baseball game, to a concert, to a get-together, this has casual written all over it.', gender: 'male', sizes: 'M', colors_available: 'black', price: '$64.99', standalone: true, quantity: 6, images_attributes: [{type_of_image: 1, picture: File.open(File.join(Rails.root, 'app/assets/images/DopeCasualShirt.png'))}])
GorClothing.create(merch_type: 'top', description: 'Honored guest much?', gender: 'male', sizes: 'M', colors_available: 'Gray', price: '$49.99', standalone: true, quantity: 4, images_attributes: [{type_of_image: 1, picture: File.open(File.join(Rails.root, 'app/assets/images/CoolWineTastingShirt.png'))}])
GorClothing.create(merch_type: 'top', description: 'Too Fresh. Like Fresh Prince of Bel-Air Fresh. Okay, lemme stop.', gender: 'male', sizes: 'M', colors_available: 'White', price: '$39.99', standalone: true, quantity: 4, images_attributes: [{type_of_image: 1, picture: File.open(File.join(Rails.root, 'app/assets/images/FunkyTropicalShirt.png'))}])
在 views/possible_matches/setup_possible_matches.json.builder 文件中，我有：
json.contemplated_piece @contemplated_piece :standalone, :merch_type, :gender, :price, :created_at
json.standalone_bottoms @standalone_bottoms :merch_type, :gender, :price, :created_at
json.standalone_tops @standalone_tops :standalone, :merch_type, :gender, :price, :created_at
hash = {:toggled_pieces => {:contemplated_piece_id => @contemplated_piece.id}}
json.suggested_tops @suggested_tops :merch_type, :gender, :created_at, :price json.merge hash
hash - {:toggled_pieces => {:contemplated_piece_id => @contemplated_piece.id}}
json.suggested_bottoms @suggested_bottoms :merch_type, :price, :gender, :created_at, json.merge hash
json.extra_tops @extra_tops :merch_type, :standalone, :gender, :price, :created_at
json.extra_bottoms @extra_bottoms :merch_type, :standalone, :price, :gender, :created_at
该操作由 actions/index.js 文件中的 redux 操作调用。
export function defaultPieces(){
return function(dispatch){
fetch(`${API_URL}/possible_matches/setup_possible_matches`, {
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
}
}).then((res) => res.json())
.then((json) => {
dispatch(getInitialPieces(json))
})
}
}
export function getInitialPieces(request){
return {
type: INITIAL_PIECES,
payload: request
}
}
我正在尝试使用 mapStateToProps 方法来了解在可能的匹配控制器内部的任何特定操作中定义的不同实例变量之间的区别，这些变量来自 rails 后端 api，即上面的 setup_possible_matches。
function mapStateToProps(state){
return {
UpperComponents: state.possibleMatches.UpperComponents,
LowerComponents: state.possibleMatches.LowerComponents,
contemplatedPiece: state.possibleMatches.contemplated_piece,
extraTops: state.possibleMatches.extraTops,
extraBottoms: state.possibleMatches.extraBottoms,
standaloneTops: state.possibleMatches.standaloneTops,
standaloneBottoms: state.possibleMatches.standaloneBottoms,
suggestedTops: state.possibleMatches.suggestedTops,
suggestedBottoms: state.possibleMatches.suggestedBottoms
};
}
在 reducers/index.js 中，我们有：
const allReducers = combineReducers({
possibleMatches: PossibleMatchesReducer,
routing: routerReducer,
form: formReducer
});
在控制台中，我收到一个错误：
未捕获（承诺中）类型错误：无法读取未定义的属性“contemplated_piece”
它指的是 PossibleMatches reducer 内部的一行：
case INITIAL_PIECES:
console.log('Initial_Pieces: ', action.payload);
return Object.assign({}, state, {contemplated_piece: action.payload.data.contemplated_piece}, <-- this line
{extraTops: action.payload.data.extra_tops},
{extraBottoms: action.payload.data.extra_bottoms},
{standaloneTops: action.payload.data.standalone_tops},
{standaloneBottoms: action.payload.data.standalone_bottoms},
{suggestedTops: action.payload.data.suggested_tops},
{suggestedBottoms: action.payload.data.suggested_bottoms})
在控制台内部，这是相对于上面的 console.log(action.payload) 行返回的内容：
在控制台中，我们还得到 TypeError: Cannot read property 'then' of undefined
在 PossibleMatches 控制器内部，我们有：
class PossibleMatches extends Component{
constructor(props){
super(props);
this.props.defaultPieces().then(function(results){console.log('Results: ', results)});
}
...rest of Component
function mapDispatchToProps(dispatch) {
return {
defaultPieces: () => {
dispatch(defaultPieces())
}
}
}
}
export default connect(mapStateToProps, mapDispatchToProps)(PossibleMatches)
任何帮助，将不胜感激。谢谢。