Question

我试图获取fetch调用的返回值，并将其作为道具传递给另一个react组件。我遇到的问题是该函数返回的未定义。

render() {
function getUserWhoPosted (id){
let url = new URL('http://10.6.254.22:5000/userinformation' + '/'+ id)
fetch(url).then((resp) => resp.json()) // Transform the data into json
.then((data) => {
  console.log(data[0].firstName)
  return data[0].firstName
})
}

//  console.log(getUserWhoPosted(1))


const reversedProps = this.props.posts.reverse();
const postItems = reversedProps.map(post => (
  // console.log(getUserWhoPosted(post.userId)),
  <PostBodyTemplate key={post.id} title={post.title} postBody={post.postBody} giphyUrl = 
  {post.giphyUrl} userWhoPosted = { getUserWhoPosted(post.userId) }/>
  ));

 return (
  <div>
     <h1>{postItems}</h1> 
  </div>
 )
 }

getUserWhoPosted（post.userId）应该返回一个名称，它以未定义的形式返回。

Answer 1

实际上，getUserWhoPosted不返回任何内容（默认情况下未定义）；是.then内部的回调函数，它返回一些信息。但这并没有涉及到主要功能。从.then处理程序返回内容的唯一用途是将值传递到链中的下一个.then ...在这种情况下，该值不存在。

提取是异步的。它返回一个Promise，然后其余的代码会继续继续，直到实际获取任何数据为止。当数据最终进入时，.then处理程序将被调用并传递数据。代码不会等待这种情况发生。

相反，您应该做的是在Promise之外创建一个变量（我们将其称为userWhoPosted）并将THAT作为prop值传递。并且不要在Promise处理程序中返回data[0].firstName，只需将userWhoPosted的值设置为该值即可。那应该做你想要的；在数据输入之前，userWhoPosted将一直未定义，这时它将被设置为获取的结果。

当我尝试将获取响应作为道具传递给其他组件时，获取响应返回未定义的状态

1 个答案: