Javascript 组件填充 setState 后什么都没有显示

客户端:React，mobx

简短问题:

我有一个元素数组，它填充了useffect函数的内部，预期的结果是:数组中的每个元素都应该被渲染，实际的结果是:什么都没有发生.仅在VSCode中更改代码后才会显示渲染.

已try :更改.映射到.对于每一种情况，在设置状态(…[arr])中扩展运算符的不同变化，或者即使没有扩展运算符，也不会发生任何变化.

信息:

朋友.jsx部分，包含数组状态和与之相关的所有内容，以及填充函数.

  const [requestsFrom, setRequestsFrom] = useState([]) //contains id's (strings) of users that will be found in MongoDB
  const [displayRequestsFrom, setDisplayRequestsFrom] = useState([]) //should be filled by elements according to requestsFrom, see below

  const getUsersToDisplayInFriendRequestsFrom = () => {
    const _arr = [...displayRequestsFrom]
    requestsFrom.map(async(f) => {
      if (requestsFrom.length === 0) {
        console.log(`empty`) //this part of code never executes
        return
      } else {
        const _candidate = await userPage.fetchUserDataLite(f)
        _arr.push( //template to render UserModels (below)
          {
            isRequest: true,
            link: '#',
            username: _candidate.login,
            userId: _candidate._id
          }
        )
        console.log(_arr)
      }
    })
    setDisplayRequestsFrom(_arr)
    // console.log(`displayRequestsFrom:`)
    console.log(displayRequestsFrom) //at first 0, turns into 3 in the second moment (whole component renders twice, yes)
  }

渲染模板功能:

  const render = {
    requests: () => {
      return (
        displayRequestsFrom.map((friendCandidate) => {
          return (
            <FriendModel link={friendCandidate.link} username={friendCandidate.username} userId={friendCandidate.userId}/>
          )
        })
      )
    }
  }

使用效果:

  useEffect(() => {
    console.log(`requestsFrom.length === ${requestsFrom.length}`)
    if (!requestsFrom.length === 0) {
      return 
    } else if (requestsFrom.length === 0) {
      setRequestsFrom(toJS(friend.requests.from))
      if (toJS(friend.requests.from).length === 0) {
        const _arr = [...requestsFrom]
        _arr.push('0')
        setRequestsFrom(_arr)
      }
    }
      if (displayRequestsFrom.length < 1 && requestsFrom.length > 0) {
         getUsersToDisplayInFriendRequestsFrom()
         //displayRequestsFrom and requestsFrom lengths should be same
      }
    
  },
   [requestsFrom]
  )

jsx的渲染部分:

    <div className={styles.Friends}>
      <div className={styles['friends-container']}>
           {render.requests()}
      </div>
    </div>

UPD:我的控制台.从一开始就按正确的顺序记录输出:

requestsFrom.length === 0
requestsFrom.length === 3
displayRequestsFrom === 0
displayRequestsFrom === 3 

正如我们所看到的，在组件装载和渲染结束时，displayRequestsFrom和requestsFrom都不为空，唯一剩下的问题是我找不到-为什么即使displayRequestsFrom组件中有3个模板也不渲染它们，但如果我按forceUpdate按钮(创建它是为了调试目的，这里是:)

  const [ignored, forceUpdate] = React.useReducer(x => x + 1, 0);

  <button onClick={forceUpdate}>force update</button>