.map 中的 setState 提供无限刷新循环

Question

我的渲染中有以下内容

<select name="ip" id="ip" onChange={(e) => handleChange(e)}>
                            {redisServers.servers[config.ENV].map(i => {
                                if (i.default) {
                                    setSelectedServer(i.ip + ":" + i.port)
                                    return <option selected value={i.ip + ":" + i.port}>{i.label}</option>
                                } else if (!i.default) {
                                    return <option value={i.ip + ":" + i.port}>{i.label}</option>
                                }
                            })}
                        </select>

问题是，如果我添加 setSelectedServer() 来设置状态，我会收到一个无限循环。我不知道为什么会这样。

条件只触发一次。

handlechange 是一个简单的 console.log

  const handleChange = (event) => {
        let value = event.target.value
        setSelectedServer(value)
    }

我在地图里面做setstate，一开始就设置默认选择值

Answer 1

在使用效果中设置默认选择

useEffect(() => {
    const selected = redisServers.servers[config.ENV].find(i => i.default)
    if(selected)
    setSelectedServer(selected.ip + ":" + selected.port)
}, [])