Reactjs 在对所有元素进行完全迭代后执行函数

我有一个json对象

messages

，我想使用

map

函数来显示和迭代它。这是加载在一开始。其中有23个元素，但需要很短的时间才能显示所有元素。我想写一个

加载

函数，也就是说，一旦所有消息都被迭代，就应该调用一个函数。 我在这里尝试过这个，但是这个函数没有执行。 现在我的问题是，当遍历所有元素时，如何执行函数

加载

注意：我已经更新了消息Json，这个发送也可以实时工作，但只是初始加载需要太长时间，因此我想向用户展示一些东西。应显示加载栏，一旦完整列表被迭代，列表应被删除或不再显示，用户应收到完整的加载列表

function MessageSide(props) {
  const [loaded, setLoaded] = useState(false); // added
  const loading = () => {
    console.log("LOADED")
    setLoaded(true) // added
  }

  return (
      <div class="col flex-fill background--chat">
        <div className="content__body">
         // added
         {loaded? false :
            <div>
                 <Ellipsis color="#5869FF" style={{left:"50", right:"50", top:"50", bottom:"50",}}/>
             </div>
          }                       // added
          <div className="item"  style={loaded? {} : {display: 'none'}}>
            {messages.map((message) => {
              // onLoad={() =>test()} that didn't work
              return (
                <div>
                  <Message
                    message={message.body} 
                    id={message.id}
                    timestamp={message.timestamp}
                    chatid={message.chatid}
                    onLoad={() =>loading()} // this is what I tried
                  />
                </div>
              );
            })}
          </div>
          <div ref={messagesEndRef}/>
        </div>
      </div>
  );
}
export default MessageSide;

功能消息端（道具）{
const[loaded，setLoaded]=useState（false）；//已添加
常量加载=（）=>{
控制台日志（“已加载”）
setLoaded（true）//已添加
}
返回(
//增加
{已加载？错误：
}//增加
{messages.map（（message）=>{
//onLoad={（）=>test（）}不起作用
返回(
正在加载（）}//这是我尝试的
/>
);
})}
);
}
导出默认消息端；

加载不是在

返回中确定的，更不用说在循环中了

你应该在问题中加入
的代码

const [initialLoad, setInitialLoad] = useState(false)
useEffect(()=>{ 
  if(message.length > 0) { setInitialLoad(true) } 
},[message]) 
useEffect(()=>{ if(message.length > 0) { 
  /*stop showing loading screen */
} },[initialLoad])`

这样，变量initialLoad在第一次渲染时将为false，但在加载后将变为true。但是，之后它不会更改，导致最后一个useEffect挂钩只执行一次
谢谢您的回答。例如，我已经能够很容易地在图像标记中使用这个
onLoad（）
。如果加载单个图像，则会执行onLoad（）。然而，在您的例子中，您正在加载一组（列表）数据，并映射它们。因此，与onLoad（）等效的东西应该侦听总数据的实际加载，而不是在盲目提供加载数据的每个组件的级别。但是，如果您希望这样做，请向
useffect（（）=>{here}，[]）
消息组件内部添加一些代码，以便在呈现组件时执行，这意味着还将加载变量
messages
。但是要小心，因为它将作为
消息的长度执行。谢谢您的解释。您能告诉我如何构建与
onLoad（）
函数等效的东西吗？谢谢。现在我明白了。非常感谢你的帮助。成功了。