我正在使用reactjs,并且在尝试显示JSON数据(来自文件或服务器)时似乎无法阻止此错误:
Uncaught TypeError: this.props.data.map is not a function
我看过:
React 代码抛出“TypeError:this.props.data.map 不是函数”
React.js this.props.data.map() 不是函数
这些都没有帮助我解决问题。页面加载后,我可以验证 this.data.props 不是未定义的(并且确实具有与 JSON 对象等效的值 - 可以使用
window.foo
进行调用),因此看起来它在加载时没有及时加载由 ConversationList 调用。如何确保 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')
);
}
})
编辑:添加示例conversations.json
注意 - 调用
this.props.data.conversations
也会返回错误:
var conversationNodes = this.props.data.conversations.map...
返回以下错误:
未捕获类型错误:无法读取未定义的属性“map”
这是conversations.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});
检查“data”设置为什么类型,并确保它是一个数组。
修改了代码并提出了一些建议(propType 验证和clearInterval):
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
创建一个数组,如下所示:
data = Array.from(props.data);
然后就可以使用
data.map()
功能
更一般地,您还可以将新数据转换为数组并使用诸如 concat 之类的东西:
var newData = this.state.data.concat([data]);
this.setState({data: newData})
此模式实际上用于 Facebook 的 ToDo 演示应用程序(请参阅“应用程序”部分),网址为 https://facebook.github.io/react/。
发生这种情况是因为组件是在异步数据到达之前渲染的,您应该在渲染之前进行控制。
我是这样解决的:
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>
);
}
this.props && this.props.partners.length > 0 ?
我也有同样的问题。解决方案是将 useState 初始状态值从字符串更改为数组。 在 App.js 中,之前的 useState 是
const [favoriteFilms, setFavoriteFilms] = useState('');
我把它改成了
const [favoriteFilms, setFavoriteFilms] = useState([]);
使用这些值的组件不再使用 .map 函数抛出错误。
有时你只需要检查 api 调用是否有数据返回,
{this.props.data && (this.props.data).map(e => /* render data */)}
从 props 数据创建一个数组。
let data = Array.from(props.data)
然后你可以像这样使用它:
{ data.map((itm, index) => {
return (<span key={index}>{itm}</span>)
}}
如果您使用 React hooks,则必须确保
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
将是一个数组的数组。
每当我遇到此错误时,这对我来说都很好。
我也有类似的错误,但我使用 Redux 进行状态管理。
我的错误:
未捕获类型错误: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
你应该尝试这个:
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)
}
添加此行。
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',
我删除了设置它的代码行来修复它
您可能需要将对象转换为数组才能使用映射函数,因为您以数组形式获取 JSON 数据,我将其更改为:
const [data, setData] = useState([]);
来自:
const [data, setData] = useState(0);
希望对您有帮助。 谢谢
问题->使用 fetch 或 axios 从 api/rest api 获取产品并显示列表 error-> data.map 不是一个函数。 解决方案->1) map 不能与对象数组一起使用。2) 必须/必须将其解构为 const 或 let 变量,然后数组才能与 map 一起使用。
!可选 - 然后可以使用 setter 函数使用 useState 挂钩将数据存储在变量中。
尝试获取数据时的
componentDidMount()
生命周期