Я боролся с этим пару дней, и любая помощь будет признательна.
В этом компоненте я попытался выполнить HTTP-вызов к моему серверу и базе данных. После анализа ответа, используя JSON.parse, я получаю обратно правильно сформированный объект JSON. Затем я хочу отобразить через этот объект и для каждого возврата новый компонент (называемый HistoryItem).
Приведенный ниже код пытается сделать это, переводя объект в состояние компонента, но это вызывает бесконечный цикл обновления. Ранее я пробовал функциональный компонент.
Оригинальная итерация этого компонента сработала. Но он извлек статический объект JSON из моих файлов на стороне клиента. Поэтому я уверен, что код работает без http-вызова.
Мне кажется, что я делаю что-то не так с асинхронным режимом, который запрещает асинхронно полученный от рендеринга объект JSON.
Ниже приведен основной компонент. Обратите внимание, что компонент импортирует имя пользователя из Redx. Это передает HTTP-вызов, чтобы получить только записи, связанные с вошедшим в систему пользователем. Опять же, все хорошо на стороне сервера / базы данных ...
import React, {Component} from 'react';
import style from './history.css';
import HistoryItem from './HistoryItem/historyItem';
import data from '../../config/fakermyhistory.json';
import {Link} from 'react-router-dom';
import {connect} from 'react-redux';
import axios from 'axios';
class History extends Component {
constructor(props) {
super(props);
this.state = {
compiledList:[]
}
}
getData(){
this.state.compiledList.map((call, i) => {
const shaded = (call.rated) ? 'lightgrey' : 'white';
console.log("shaded", shaded);
return(
<Link to={`/reviewpage/${call._id}`} key={call._id}
style={{ textDecoration: 'none', color:'lightgrey'}}>
<div style={{backgroundColor:shaded}}>
<hr/>
<HistoryItem call={call}/>
</div>
</Link>
)
})
}
render(){
axios.post('/api/history', {username: this.props.username})
.then((res) => {
const array = JSON.parse(res.request.response);
this.setState({compiledList: array})
console.log("res", array);}
).catch((err) => console.log("err", err));
return (
<div className={style.container}>
<div className={style.historyHeader}>
<div className={style.historyHeaderText}>
Your Call History
</div>
</div>
<div className={style.historyList}>
{this.getData()};
</div>
</div>
)
}
}
const mapStateToProps = state => {
return {
username:state.auth.username
};
}
export default connect(mapStateToProps, null)(History);
Заранее спасибо, если можете помочь.
Вот еще одна версия, использующая его в качестве функционального компонента. Также не рендерится (хотя в этом нет ошибок)
import React, {Component} from 'react';
import style from './history.css';
import HistoryItem from './HistoryItem/historyItem';
import data from '../../config/fakermyhistory.json';
import {Link} from 'react-router-dom';
import {connect} from 'react-redux';
import axios from 'axios';
const History =(props)=> {
const getData=(props)=>{
console.log("props", props);
axios.post('/api/history', {username: props.username})
.then((res) => {
const array = JSON.parse(res.request.response);
console.log("array", array);
array.map((call, i) => {
const shaded = (call.rated) ? 'lightgrey' : 'white';
console.log("shaded", shaded);
return(
<Link to={`/reviewpage/${call._id}`} key={call._id}
style={{ textDecoration: 'none', color:'lightgrey'}}>
<div style={{backgroundColor:shaded}}>
<hr/>
<HistoryItem call={call}/>
</div>
</Link>
)
})
}
).catch((err) => console.log("err", err));
}
return (
<div className={style.container}>
<div className={style.historyHeader}>
<div className={style.historyHeaderText}>
Your Call History
</div>
</div>
<div className={style.historyList}>
{getData(props)};
</div>
</div>
)
}
const mapStateToProps = state => {
return {
username:state.auth.username
};
}
export default connect(mapStateToProps, null)(History);