无法显示数组 React 的元素答案

【问题标题】：Can't display elements of array React无法显示数组 React 的元素
【发布时间】：2020-05-29 14:34:10
【问题描述】：

我可以看到我的数组处于状态，但我不知道为什么数组的元素没有显示在应用界面上。

const [members, setMembers] = useState([])

useEffect( () => {
    getMembers();
}, [props.event])



const getMembers = () => {
    let new_members = [];
    console.log(props.event)
    props.event &&  props.event.uczestnicy.map(member => {
        member.get().then(doc => {
            let new_member;
            new_member = {
                ...doc.data(),
                id: doc.id
            }
            new_members.push(new_member)
        })
        setMembers(new_members)
    })
    console.log(new_members)
    console.log(members)    
}

[...]

{members && members.map(member => {
    console.log('mem',member)
    return(
        <div key={member.id}>
            {member.nick}
        </div>
    )
})}

所以我可以在使用 React 开发者工具的组件中看到这个数组，但即使 console.log 在执行的那一刻也看不到它。

console.log(new_members) 和 console.log(members) 结果：

【问题讨论】：

你需要等待promis解决后再尝试使用它。
好的，但是我该怎么做呢？为什么控制台显示new_members 而members 不显示？
第一个日志显示这些值，因为它们已设置。但是setMembers 需要在实际设置members 之前再次渲染，并且日志语句在同一个渲染中执行，所以它在那一刻仍然未设置。
这能回答你的问题吗？ React setState not updating state 我知道你正在使用 useState 钩子，但反应生命周期的概念是相同的。这个问题几乎每天都会被问到，请搜索以查看您的问题是否已经被问过并有一个被接受的解决方案。
另外，您没有异步代码，因此 array::map 的每次迭代都会使用相同的初始空 newMembers 数组更新状态。

标签： reactjs

【解决方案1】：

您的成员值是异步获取的，因此如果您仅在解析所有值后设置状态，则它是理想的。为此，您可以使用Promise.all

const getMembers = async () => {
    let new_members = [];
    console.log(props.event)
    if(props.event) {
      const val  = await Promise.all(props.event.uczestnicy.map(member => {
        return member.get().then(doc => {
            let new_member;
            new_member = {
                ...doc.data(),
                id: doc.id
            }
            return new_member
        })
     });
     setMembers(values);
     console.log(values);
   } 
}

【讨论】：