React JS-Uncatch TypeError: this. pros.data.map 不是函数

我使用的是 reactjs，在尝试显示 JSON 数据(来自文件或服务器)时似乎无法防止这个错误:

Uncaught TypeError: this.props.data.map is not a function

我看过:

对抛出“ TypeError: this. pros.data.map is not a function”的代码作出反应

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')
);
}
})

编辑: 添加样本对话.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}]}
600835 次浏览
小开
最佳答案

.map函数只在数组上可用。
看起来 data不是您期望的格式(它是{} ，但是您期望[])。

this.setState({data: data});

应该是

this.setState({data: data.conversations});

检查“ data”被设置为什么类型，并确保它是一个数组。

带有一些建议(protype 验证和 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')
);
}
})
小开

更一般地说，您还可以将新数据转换为数组，并使用类似 concat 的东西:

var newData = this.state.data.concat([data]);
this.setState({data: newData})

这种模式实际上是在 https://facebook.github.io/react/的 Facebook ToDo 演示应用程序中使用的(参见“应用程序”一节)。

小开

您不需要使用数组来执行此操作。

var ItemNode = this.state.data.map(function(itemData) {
return (
<ComponentName title={itemData.title} key={itemData.id} number={itemData.id}/>
);
});
小开

之所以会发生这种情况，是因为组件是在异步数据到达之前呈现的，您应该在呈现之前进行控制。

我是这样解决的:

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/未定义时，Map 无法解析，所以我首先做了一个控件

this.props && this.props.partners.length > 0 ?

小开

您需要用 props.data创建一个数组，如下所示:

data = Array.from(props.data);

那么就可以使用 data.map()函数了

小开

在获取数据时尝试 componentDidMount()生命周期

小开

要使用 map函数，需要将对象转换为数组:

const mad = Object.values(this.props.location.state);

其中 this.props.location.state是传递到另一个组件的对象。

小开

正如在已接受的答案中提到的，当 API 以格式(比如说对象)而不是以数组的形式返回数据时，通常会导致此错误。

如果这里没有现成的答案，那么您可能需要将正在处理的数据转换为一个数组，比如:

let madeArr = Object.entries(initialApiResponse)

生成的 madeArr将是一个数组数组。

无论何时我遇到这个错误，这都能很好地工作。

小开

我有一个类似的错误，但是我使用 Redux 进行状态管理。

我的错误:

未捕获的 TypeError: this. pros.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
小开

如果您使用的是反应钩子，那么您必须确保 data被初始化为一个数组。下面是它必须看起来的样子:

const[data, setData] = useState([])
小开

我遇到了同样的问题，解决方案是将 useState 初始状态值从 string 更改为 array。 在 App.js 中，以前的 useState 是

const [favoriteFilms, setFavoriteFilms] = useState('');

我改成了

const [favoriteFilms, setFavoriteFilms] = useState([]);

使用这些值的组件停止抛出错误。

小开

有时您只需检查 api 调用是否已返回数据,

{this.props.data && (this.props.data).map(e => /* render 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',

我删除设置它来修复它的代码行

小开

你应该试试这个:

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>)
}}

提交答案