组件填充后没有任何东西出现

Question

客户：React，MOBX 服务器：nodejs，mongodb

简短问题：

我有一系列元素填充在使用效果函数内，预期结果：应渲染数组的每个元素，实际结果：什么也没有发生。仅在VSCODE中的代码更改后才出现渲染。

尝试：将.map更改为.foreach，setState（... [arr]）中的传播运算符的不同变化，甚至没有传播操作员，什么也不会改变。

信息：

friends.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的一部分with Rendering：

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

upd：我的console.log从开始时以正确的顺序输出：

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

正如我们所能看到的，也不是从displayrequestsss安装和渲染的末尾，displayRequestsss neseversequestsss explaysRequestssss explaysrequestssss explayrequestssss唯一的displayrequestssss我找不到的问题 - 为什么在DisplayRequestsss中的3个模板也不会渲染它们，但是如果我按下forceupdate按钮（为调试目的而创建它，则在这里是:)

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

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

Answer 1

Pricipal回答

这里的问题是您正在执行.map方法内部的获取。
这样，您就不会等待获取完成（请参见评论）

错误的示例（带有澄清评论）

  const getUsersToDisplayInFriendRequestsFrom =  () => {
    const _arr = [...displayRequestsFrom];
    // we are not awating requestsFrom.map() (and we can't as in this example, cause .map is not async and don't return a Promise)
    requestsFrom.map(async (f) => { 
        const _candidate = await userPage.fetchUserDataLite(f)
        // This is called after setting the state in the final line :( 
        _arr.push( 
          {
            isRequest: true,
            link: '#',
            username: _candidate.login,
            userId: _candidate._id
          }
        )
    } )
    setDisplayRequestsFrom(_arr) // This line is called before the first fetch resolves.  
   // The _arr var is still empty at the time of execution of the setter
 }

要解决，您需要等待每个获取，然后再使用新数组更新状态。

为此，您的整个功能必须是异步的，并且您需要在循环中等待。

例如，此代码变成

  const getUsersToDisplayInFriendRequestsFrom =  async () => {  // Note the async keyword here
     const _arr = [...displayRequestsFrom]
     for (let f of requestsFrom) {
       const _candidate = await fetchUserData(f)
       _arr.push(
         {
           isRequest: true,
           link: '#',
           username: _candidate.login,
           userId: _candidate._id
         }
       )
     }
     setDisplayRequestsFrom(_arr)
 }

一样并行执行每个

  const getUsersToDisplayInFriendRequestsFrom =  async () => {  // Note the async keyword here
     const _arr = [...displayRequestsFrom]
     await Promise.all(requestsFrom.map((f) => { 
       return fetchUserData(f).then(_candidate => {
          _arr.push(
            {
              isRequest: true,
              link: '#',
              username: _candidate.login,
              userId: _candidate._id
            }
          )
      });
     }));
     setDisplayRequestsFrom(_arr);
 }

---

您也可以像其他问题

从未调用服务的

问题，似乎您正在映射您试图调用服务的空数组。

const getUsersToDisplayInFriendRequestsFrom = () => {
const _arr = [...displayRequestsFrom]
/* HERE */ requestsFrom.map(async(f) => {
  if (requestsFrom.length === 0) {
    return

如果数组（From）为空的数组（requestssfrom）（在USESTATE（[]）中初始化您在MAP方法中传递的函数永远不会被调用。

不确定您要确切地尝试做什么，但这应该是问题之一...

---

不要使用状态作为渲染组件

，您不使用状态来存储渲染的组件

 _arr.push(
          <FriendModel key={_candidate.id} isRequest={true} link='#' username={_candidate.login} userId={_candidate._id}/>
        )

，而是应该将数据映射在模板，然后为数据阵列中的每个元素提供一个组件。

例如：

function MyComponent() {
   const [myData, setMyData] = useState([{name: 'a'}, {name: 'b'}])

   return (<>
        {
         myData.map(obj => <Friend friend={obj} />)
         }
   </>)
}

不：

function MyComponent() {
   const [myDataDisplay, setMyDataDisplay] = useState([
         <Friend friend={{name: 'a'}} />, 
         <Friend friend={{name: 'b'}} />
   ])

   return <>{myDataDisplay}</>
}

---

不要使用useffect来初始化您的状态，

我想知道为什么您在 value useffect 中设置requests。

您为什么不在usestate（）内初始化requests的状态？

类似的东西，

const [requestsFrom, setRequestsFrom] = useState(toJS(friend.requests.from))

而不是检查useffect内的长度并填写

，以便您的使用效率可以变成类似的东西

useEffect(() => {
  if (displayRequestsFrom.length < 1 && requestsFrom.length > 0) {
     getUsersToDisplayInFriendRequestsFrom()
  }
},
 [requestsFrom]
)