React中如何在onClick函数外部访问变量？求解决方案

你的核心问题是list是click函数内的局部变量，只能在函数内部作用域访问，外部无法获取。同时原代码的复选框逻辑存在错误，会导致城市添加/移除功能异常，下面给出修正后的解决方案：

1. 基础方案：将list提升到函数外部 #

如果只是需要在外部访问list变量，把它声明在函数外部，在click函数内更新即可：

let abe = []
let list = '' // 提前在外部声明list变量
const click = (e) => {
    const cityy = e.target.value
    const isCityExist = abe.some(obj => obj.city === cityy)

    // 修正复选框逻辑：选中时添加，取消时移除
    if (e.target.checked) {
        if (!isCityExist) {
            abe.push({ "city": cityy })
        }
    } else {
        const cityIndex = abe.findIndex(p => p.city === cityy)
        if (cityIndex !== -1) { // 避免找不到元素时splice报错
            abe.splice(cityIndex, 1)
        }
    }

    // 更新外部的list变量
    list = abe.map(item => item.city).join(" , ")
    // 此处可直接使用list，比如打印或传递给其他逻辑
    console.log(list)
}

此时在函数外部可以直接访问list变量，获取最新的城市拼接字符串。

2. 框架场景方案（Vue/React） #

如果是在Vue、React这类前端框架中，建议使用框架自带的状态管理来存储数据，这样状态变化时视图能自动响应：
以Vue 3为例：

import { ref, watch } from 'vue'

// 用ref声明响应式状态
const abe = ref([])
const list = ref('')

const click = (e) => {
    const cityy = e.target.value
    const isCityExist = abe.value.some(obj => obj.city === cityy)

    if (e.target.checked) {
        if (!isCityExist) {
            abe.value.push({ city: cityy })
        }
    } else {
        const cityIndex = abe.value.findIndex(p => p.city === cityy)
        if (cityIndex !== -1) {
            abe.value.splice(cityIndex, 1)
        }
    }
}

// 监听abe的变化，自动更新list
watch(abe, (newCityList) => {
    list.value = newCityList.map(item => item.city).join(' , ')
}, { deep: true })

此时list.value会自动同步最新的城市拼接结果，且能直接在模板中使用。

内容的提问来源于stack exchange，提问作者amghare