Внутри моего компонента AdditionalMatches я импортировал несколько асинхронных функций из моего файла действий / индекса, и когда я вызываю эти функции внутри componentDidMount, я получаю сообщение об ошибке: defaultPieces не является функцией.
Ниже приведено содержимое моего компонента AdditionalMatches и файла actions / index.js:
Ради краткости я приложил все усилия, чтобы добавить все, что имеет отношение к основной проблеме.
PossibleMatches.js
import { connect } from 'react-redux';
import {arrangePieces, defaultPieces, setEvaluatedPiece, getCorrespondingPieces} from '../actions/index';
constructor(props){
super(props);
const initialState = {
currentComponent: {whichPiece: {whichType: null, currentUpperComponent: null, currentLowerComponent: null}},
UpperComponents: this.props.UpperComponents,
LowerComponents: this.props.LowerComponents,
UpperComponentEnabled: false,
LowerComponentEnabled: false,
isFetched: false,
isFetching: true
}
this.state = {
...initialState
}
this.residingUpperComponent = createRef();
this.residingLowerComponent = createRef();
//Also need to this.prop.setEvaluatedPiece based off of this.props.setCurrentComponent if callback from Lower or Upper Components elapses time
this.setNewPiece = this.setNewPiece.bind(this);
this.renderDecision = this.renderDecision.bind(this);
}
async componentDidMount(){
const {store} = this.context;
let stateRef = store.getState();
const { defaultPieces, arrangePieces } = this.props;
try {
const summon = () => { defaultPieces();
arrangePieces();}
await summon();
} catch(error){
throw Error(error);
}
console.log("AFEWOVMAOVHIE")
this.setState({isFetched: true, isFetching: false});
}
renderDecision(){
const { currentComponent, LowerComponentEnabled, UpperComponentEnabled, isFetching, isFetched} = this.state;
const { suggestedBottoms, suggestedTops, UpperComponents, LowerComponents } = this.props;
if (isFetching){
return (<div className='activityLoader'>
<ActivityIndicator number={3} duration={200} activeColor="#fff" borderWidth={2} borderColor="50%" diameter={20}/>
</div>);
} else if (isFetched){
return (
<div className = "PossibleMatches_Container">
<i className = 'captureOutfit' onClick = {this.snapshotMatch}></i>
<TransitionGroup component = {PossibleMatches}>
** ** ** {UpperComponents.map((component) => {
return (<UpperComponent key={component.created_at} id={component.id}
switchComponent={this.switchFocus}
setCurrentPiece={this.setNewPiece}
evaluatePiece={this.isOppositeComponentSuggested}
image={component.image}
toggleToPiece = {() => {if (LowerComponentEnabled === false){this.setState({LowerComponentEnabled: true})} else return; this.setState({currentLowerComponent: suggestedBottoms[0]})}}
isLowerComponentEnabled = {LowerComponentEnabled}
ref = {this.residingUpperComponent}
className = {currentComponent.whichPiece.whichType === 'match' ? 'PossibleMatches_Container' : currentComponent.whichPiece.whichType === 'bottom' ? 'standalonePiece' : 'standalonePiece'}/>
)
})
}
</TransitionGroup>
<TransitionGroup component = {PossibleMatches}>
{LowerComponents.map((component) => {
return (<LowerComponent key={component.created_at} id={component.id}
setCurrentPiece = {this.setNewPiece}
evaluatePiece={this.isOppositeComponentSuggested}
image={component.image}
toggleToPiece = {() => {if (UpperComponentEnabled === false){this.setState({UpperComponentEnabled: true})} else return; this.setState({currentUpperComponent: suggestedTops[0]})}}
switchComponent = {this.switchFocus}
isUpperComponentEnabled = {UpperComponentEnabled}
ref = {this.residingLowerComponent}
className = {this.state.currentComponent.whichPiece.whichType === 'match' ? 'PossibleMatches_Container' : this.state.currentComponent.whichPiece.whichType === 'bottom' ? 'standalonePiece' : 'standalonePiece'}/>)
})
}
</TransitionGroup>
</div>
)
}
}
render(){
return(
<div className = 'GorClothingContainer'>
<Wardrobe upperComponent={this.state.currentComponent.whichPiece.currentUpperComponent} lowerComponent={this.state.currentComponent.whichPiece.currentLowerComponent} enableCapture={(snapshot) => this.snapshotMatch = snapshot} />
{this.renderDecision()}
</div>
);
}
function mapStateToProps(state){
const { UpperComponents, LowerComponents, contemplated_piece, extraTops, extraBottoms, standaloneBottoms, standaloneTops, suggestedBottoms, suggestedTops } = state.possibleMatches;
return {UpperComponents, LowerComponents, contemplated_piece, extraTops, extraBottoms, standaloneBottoms, standaloneTops, suggestedBottoms, suggestedTops };
}
export default connect(mapStateToProps, {defaultPieces, arrangePieces, getCorrespondingPieces, setEvaluatedPiece})(PossibleMatches)
Внутри моих действий / index.js
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) => {
console.log('defaultPieces: ', json);
dispatch(getInitialPieces(json))
})
}
}
export function getInitialPieces(request){
return {
type: INITIAL_PIECES,
payload: request
}
}
Внутри возможных редукторов:
import {INITIAL_PIECES, GET_ANCILLARY_PIECES, ORGANIZE_PIECES, SET_CONTEMPLATED_PIECE} from '../actions/types';
const initialState = {
UpperComponents: [],
LowerComponents: [],
contemplated_piece: null,
extraTops: [],
extraBottoms: [],
standaloneTops: [],
standaloneBottoms: [],
suggestedTops: [],
suggestedBottoms: []
}
export default function(state = initialState, action){
switch(action.type){
case INITIAL_PIECES:
return {...state, {contemplated_piece: action.payload.contemplated_piece,
extraTops: action.payload.extra_tops,
extraBottoms: action.payload.extra_bottoms,
standaloneTops: action.payload.standalone_tops,
standaloneBottoms: action.payload.standalone_bottoms,
suggestedTops: action.payload.suggested_tops,
suggestedBottoms: action.payload.suggested_bottoms}
case GET_ANCILLARY_PIECES:
return {...state, extraTops: action.payload.extra_tops,
extraBottoms: action.payload.extra_bottoms,
standaloneTops: action.payload.standalone_tops,
standaloneBottoms: action.payload.standalone_bottoms,
suggestedTops: action.payload.suggested_tops,
suggestedBottoms: action.payload.suggested_bottoms}
case ORGANIZE_PIECES:
return {...state, UpperComponents: action.payload.UpperComponents,
LowerComponents: action.payload.LowerComponents}
case SET_CONTEMPLATED_PIECE:
return {...state, contemplated_piece: action.payload.contemplated_piece}
default:
return state;
}
* *} Тысяча двадцать-один
Поскольку defaultPieces не является допустимой функцией для компонентов AdditionalMatches, это мешает интерпретации свойства UpperComponents, которое исходит из функции mapStateToProps (обозначается * выше).
Что характерно, так это то, что json вышел из системы с помощью методовrangePieces и defaultPieces:
