# React
## Mapping for multiple components
### Error
I got components from an array using map function.
While I deleted some elements in the array, the components didn’t disappear accordingly.
### Solution
While using map in React, the components should be given a parameter: ***key***.
This is what React relies on to organize the components.
And in the component, the ***key*** parameter cannot be accessed.
If it was needed, the parameter should be passed by another name.
# JavaScript
## Array.map and asynchronous operations
### Error
I have an array with async functions.
When I use map function to generate a new array with the function results, the new array is not correctly.
Even after I used **async** and **await** everywhere I can, it didn’t work.
### Solution
Array.map in JavaScript is a convenient function.
But considering async operations, if the inner function is async, the map function may cause some unexpected results.
In this case, the result of map function should be assigned to a Promise Array, and then call ***Promise.all*** on it.
# Redis
## Playwright running in docker
### Error
I am running a Redis server locally.
My Node.js service can get a connection to it, but my playwright service cannot.
### Solution
My playwright service is running in a docker.
So the **localhost** means the docker itself, not my local computer.
Modify the **localhost** to **host.docker.internal** can fix the error. It is an address pointing to local computer reserved by docker.
## Sending and receiving jobs from message queue
### Error
I tried to use the same queue for job sending and receiving, but it was not good.
The local worker just took over all the jobs posted.
### Solution
Use two queues. One for sending, one for receiving.
# Related Platforms
([Github Issues](https://github.com/baddif/daily-tech-sharing/issues)) / ([Notion](https://easy-monday-766.notion.site/My-Daily-Sharing-1f55221ee33180c9b485f1719e067f32)) / ([Blog](https://tech-share.nonpareil.me/))
# Advertisement
([A website to optimize your resume and to boost your career: Nonpareil.me](https://career.nonpareil.me))
# React
## 通过map方法动态生成组件
### 问题
我从一个数组中获取数据，使用map函数动态生成组件。
当我删除原数组中的一些元素时，这些组件没有正确消失，现象不稳定。
### 解决方案
使用Map方法动态生成组件时，需要给组件赋值一个指定的参数：***key***。
这是React用于组织这些组件的关键参数。
在组件内部，这个***key***是无法获取的。如果需要用这个值，那就用另外一个名字再传一次。
# JavaScript
## Array.map和异步操作
### 问题
我在一个数组中存储了一些异步函数。
我想用map函数来计算这些异步函数的结果，并且保存到一个新数组中，但是新数组总是错误的。
即使我在能加的地方把async和await都加上也不行。
### 解决方案
Array.map很方便，但是涉及到异步操作，结果可能会很奇怪。
像我这种场景，需要用一个Promise数组接收这些异步函数的结果，然后在这个Promise数组上调用***Promise.all***。
# Redis
## Docker中运行的Playwright
### Error
我在本机上运行了一个Redis服务器。
我的Node.js服务能够连接这个Redis，但是playwright服务不行。
### 解决方案
我的Playwright是运行在Docker中的。所以配置成**localhost**，实际指向的是Docker，而不是我的本机。
把**localhost**改成**host.docker.internal**就可以了。这是Docker预留的一个域名，用来指向本机的。
## 通过消息队列发送和接收消息
### 问题
我试图用同一个消息队列，在同一个进程里既发送又接收消息。
不过这样出现了一个问题，本地的worker把发布出去的消息全部截留了下来。
### 解决方案
用两个队列，一个发送，一个接收。
# 相关平台
([Github Issues](https://github.com/baddif/daily-tech-sharing/issues)) / ([Notion](https://easy-monday-766.notion.site/My-Daily-Sharing-1f55221ee33180c9b485f1719e067f32)) / ([Blog](https://tech-share.nonpareil.me/))
# 推广
([优化简历，助力职场：Nonpareil.me](https://career.nonpareil.me))