반응 JS - 검색되지 않은 TypeError: this.props.data.map은 함수가 아님
reactjs로 작업 중인데 (파일 또는 서버에서) JSON 데이터를 표시할 때 이 오류를 방지할 수 없는 것 같음:
Uncaught TypeError: this.props.data.map is not a function
내가 살펴본 바로는:
반응 코드 던지기 "TypeError: this.props.data.map은 함수가 아님"
react.js this.props.data.map()은 함수가 아님
이것들 중 어느 것도 내가 문제를 해결하는 데 도움이 되지 않았다.페이지가 로드된 후, 이.data.props가 정의되지 않았는지(그리고 JSON 개체와 동등한 값을 가지고 있음) 확인할 수 있다.window.foo)) 그래서 대화록에서 호출할 때 제때 로딩이 되지 않는 것 같다.어떻게 해야 이 모든 것을 확실히 할 수 있을까?map메서드가 JSON 데이터에 대해 작동 중이지undefined가변적인가?
var converter = new Showdown.converter();
var Conversation = React.createClass({
render: function() {
var rawMarkup = converter.makeHtml(this.props.children.toString());
return (
<div className="conversation panel panel-default">
<div className="panel-heading">
<h3 className="panel-title">
{this.props.id}
{this.props.last_message_snippet}
{this.props.other_user_id}
</h3>
</div>
<div className="panel-body">
<span dangerouslySetInnerHTML={{__html: rawMarkup}} />
</div>
</div>
);
}
});
var ConversationList = React.createClass({
render: function() {
window.foo = this.props.data;
var conversationNodes = this.props.data.map(function(conversation, index) {
return (
<Conversation id={conversation.id} key={index}>
last_message_snippet={conversation.last_message_snippet}
other_user_id={conversation.other_user_id}
</Conversation>
);
});
return (
<div className="conversationList">
{conversationNodes}
</div>
);
}
});
var ConversationBox = React.createClass({
loadConversationsFromServer: function() {
return $.ajax({
url: this.props.url,
dataType: 'json',
success: function(data) {
this.setState({data: data});
}.bind(this),
error: function(xhr, status, err) {
console.error(this.props.url, status, err.toString());
}.bind(this)
});
},
getInitialState: function() {
return {data: []};
},
componentDidMount: function() {
this.loadConversationsFromServer();
setInterval(this.loadConversationsFromServer, this.props.pollInterval);
},
render: function() {
return (
<div className="conversationBox">
<h1>Conversations</h1>
<ConversationList data={this.state.data} />
</div>
);
}
});
$(document).on("page:change", function() {
var $content = $("#content");
if ($content.length > 0) {
React.render(
<ConversationBox url="/conversations.json" pollInterval={20000} />,
document.getElementById('content')
);
}
})
편집: 샘플 대화 추가.json
참고 - 호출this.props.data.conversations또한 다음과 같은 오류를 반환:
var conversationNodes = this.props.data.conversations.map...
다음 오류를 반환함:
검색되지 않은 TypeError: 정의되지 않은 속성 'map'을 읽을 수 없음
다음은 대화 내용.json:
{"user_has_unread_messages":false,"unread_messages_count":0,"conversations":[{"id":18768,"last_message_snippet":"Lorem ipsum","other_user_id":10193}]}
그.map함수는 배열에서만 사용할 수 있다.
처럼 보인다.data예상할 수 있는 형식이 아님({} 그러나 예상 [])
this.setState({data: data});
그래야 한다
this.setState({data: data.conversations});
설정 중인 데이터 유형을 확인하고 어레이인지 확인하십시오.
몇 가지 권장 사항이 있는 수정된 코드(propType 검증 및 지우기)간격:
var converter = new Showdown.converter();
var Conversation = React.createClass({
render: function() {
var rawMarkup = converter.makeHtml(this.props.children.toString());
return (
<div className="conversation panel panel-default">
<div className="panel-heading">
<h3 className="panel-title">
{this.props.id}
{this.props.last_message_snippet}
{this.props.other_user_id}
</h3>
</div>
<div className="panel-body">
<span dangerouslySetInnerHTML={{__html: rawMarkup}} />
</div>
</div>
);
}
});
var ConversationList = React.createClass({
// Make sure this.props.data is an array
propTypes: {
data: React.PropTypes.array.isRequired
},
render: function() {
window.foo = this.props.data;
var conversationNodes = this.props.data.map(function(conversation, index) {
return (
<Conversation id={conversation.id} key={index}>
last_message_snippet={conversation.last_message_snippet}
other_user_id={conversation.other_user_id}
</Conversation>
);
});
return (
<div className="conversationList">
{conversationNodes}
</div>
);
}
});
var ConversationBox = React.createClass({
loadConversationsFromServer: function() {
return $.ajax({
url: this.props.url,
dataType: 'json',
success: function(data) {
this.setState({data: data.conversations});
}.bind(this),
error: function(xhr, status, err) {
console.error(this.props.url, status, err.toString());
}.bind(this)
});
},
getInitialState: function() {
return {data: []};
},
/* Taken from
https://facebook.github.io/react/docs/reusable-components.html#mixins
clears all intervals after component is unmounted
*/
componentWillMount: function() {
this.intervals = [];
},
setInterval: function() {
this.intervals.push(setInterval.apply(null, arguments));
},
componentWillUnmount: function() {
this.intervals.map(clearInterval);
},
componentDidMount: function() {
this.loadConversationsFromServer();
this.setInterval(this.loadConversationsFromServer, this.props.pollInterval);
},
render: function() {
return (
<div className="conversationBox">
<h1>Conversations</h1>
<ConversationList data={this.state.data} />
</div>
);
}
});
$(document).on("page:change", function() {
var $content = $("#content");
if ($content.length > 0) {
React.render(
<ConversationBox url="/conversations.json" pollInterval={20000} />,
document.getElementById('content')
);
}
})
다음 항목에서 배열을 생성해야 하는 경우props.data, like so:
data = Array.from(props.data);
그러면 사용할 수 있을 것이다.data.map()기능을 발휘하다
보다 일반적으로 새 데이터를 배열로 변환하여 다음과 같은 기능을 사용할 수도 있다.
var newData = this.state.data.concat([data]);
this.setState({data: newData})
이 패턴은 실제로 페이스북의 ToDo 데모 앱(https://facebook.github.io/react/의 "A Application" 섹션 참조)에서 사용된다.
비동기 데이터가 도착하기 전에 구성요소가 렌더링되기 때문에 렌더링하기 전에 제어해야 한다.
나는 이렇게 해결했다.
render() {
let partners = this.props && this.props.partners.length > 0 ?
this.props.partners.map(p=>
<li className = "partners" key={p.id}>
<img src={p.img} alt={p.name}/> {p.name} </li>
) : <span></span>;
return (
<div>
<ul>{partners}</ul>
</div>
);
}
- 속성이 null/정의되지 않은 경우 맵에서 확인할 수 없으므로 먼저 컨트롤을 수행함
this.props && this.props.partners.length > 0 ?
나도 같은 문제가 있었어.해결책은 useState 초기 상태 값을 문자열에서 배열로 변경하는 것이었습니다.App.js에서 이전 useState는
const [favoriteFilms, setFavoriteFilms] = useState('');
로 바꿨다.
const [favoriteFilms, setFavoriteFilms] = useState([]);
그리고 이러한 값을 사용하는 구성요소는 .map 함수의 오류 던지기를 중지했다.
가끔 당신은 api call에 데이터가 아직 반환되지 않았는지 확인만 하면 된다.
{this.props.data && (this.props.data).map(e => /* render data */)}
리액션 훅을 사용하는 경우에는 반드시data배열로 초기화됨.다음 절차를 따르십시오.
const[data, setData] = useState([])
그것을 하기 위해 배열이 필요 없다.
var ItemNode = this.state.data.map(function(itemData) {
return (
<ComponentName title={itemData.title} key={itemData.id} number={itemData.id}/>
);
});
객체를 어레이로 변환하여map함수:
const mad = Object.values(this.props.location.state);
어디에this.props.location.state다른 구성요소로 전달된 객체.
승인된 답변에서 언급한 바와 같이, 이 오류는 대개 API가 배열 대신 객체라고 하는 형식으로 데이터를 반환할 때 발생한다.
여기에 기존 답변이 없는 경우, 처리 중인 데이터를 다음과 같은 어레이로 변환하십시오.
let madeArr = Object.entries(initialApiResponse)
결과madeArr배열을 갖추게 될 것이다.
이것은 내가 이 에러를 만날 때마다 나에게 잘 맞는다.
나도 비슷한 오류가 있었지만 국가 관리를 위해 Redex를 사용하고 있었다.
내 오류:
검색되지 않은 TypeError: this.props.user.map은 함수가 아님
내 오류를 해결한 내용:
응답 데이터를 배열로 포장했다.그러므로, 나는 배열을 통해 지도를 그릴 수 있다.아래는 나의 해결책이다.
const ProfileAction = () => dispatch => {
dispatch({type: STARTFETCHING})
AxiosWithAuth()
.get(`http://localhost:3333/api/users/${id here}`)
.then((res) => {
// wrapping res.data in an array like below is what solved the error
dispatch({type: FETCHEDPROFILE, payload: [res.data]})
}) .catch((error) => {
dispatch({type: FAILDFETCH, error: error})
})
}
export default ProfileAction
이 줄을 추가해라.
var conversationNodes =this.props.data.map.length>0 && this.props.data.map(function(conversation, index){.......}
여기 우리는 배열의 길이를 확인하는 중이다.길이가 0보다 크면 해 봐.
'DEFAULT_PAGINATION_CLASS': 'rest_framework.pagination.PageNumberPagination', 'PAGE_SIZE': '2',
코드 라인을 삭제한 후 해당 코드 라인을 삭제하여 코드 라인을 삭제함
다음을 시도해 보십시오.
const updateNews = async()=>{
const res= await fetch('https://newsapi.org/v2/everything?q=tesla&from=2021-12-30&sortBy=publishedAt&apiKey=3453452345')
const data =await res.json();
setArticles(data)
}
소품 데이터에서 배열을 생성하십시오.
let data = Array.from(props.data)
그러면 이렇게 쓰면 된다.
{ data.map((itm, index) => {
return (<span key={index}>{itm}</span>)
}}
해보다componentDidMount()데이터 가져오기 시 수명 주기
'Programing' 카테고리의 다른 글
| TypeError: this.getOptions는 함수가 아님 (0) | 2022.03.06 |
|---|---|
| Vue 중첩 v-for, 상위 인덱스 가져오기 (0) | 2022.03.06 |
| VSCode에서 jsx 자동 들여쓰기 방법 (0) | 2022.03.06 |
| vue 구성 요소에서 양식을 제출할 때 값 라디오 버튼을 얻는 방법 (0) | 2022.03.06 |
| 객체를 jsx에 소품으로 전달 (0) | 2022.03.05 |