Question

我在React中得到了这些数组，我想将它们用于编写和遍历一堆菜单项。我将钩子中的状态默认设置为false，并使用功能toggleMyIdOne和toggleMyIdTwo更新状态。

const [myIdOneToggler, setMyIdOne] = useState(false);
const [myIdOneToggler, setMyIdTwo] = useState(false);

const toggleMyIdOne= () => {
    setMyIdOne(!myIdOneToggler);
}

const toggleMyIdTwo= () => {
    setMyIdTwo(!myIdTwoToggler);
}

function Menu() {
    const menuItems = [
        {
            id: "myIdOne",
            state: "myIdOneToggler",
            name: "toggleMyIdOne",
            setState: "setMyIdOne",
            label: "MyIdOne"
        },
        {
            id: "myIdTwo",
            state: "myIdTwoToggler",
            name: "toggleMyIdTwo",
            setState: "setMyIdTwo",
            label: "MyIdTwo"
        },

进一步向下，Im返回此值以在单击复选框后更新复选框的状态。

{menuItems.map(item => (
    <div className="grid-item">
        <input onClick={item.name} type="checkbox" id={item.id} checked={item.state}/>
        <label htmlFor={item.id}>{item.label}</label>
    </div>

这应该调用 toggleMyIdOne 和 toggleMyIdTwo 函数。当它不在map函数中但在mapfunction中时，它工作正常且符合预期，这似乎与我声明函数名称的方式有误。

我收到此错误消息：

未捕获的不变变量：预期onClick的监听者是函数，而是得到string类型的值。

很明显，react不会从带有menuitems的声明数组中识别出字符串，但是我无法弄清楚如何声明该字符串才能使其正常工作。还是不可能这样做来使代码更紧凑。

Answer 1

在这里，您传递了一个字符串来单击仅应接受功能的道具！解决此问题，您可以做到：

array_replace()

如果您要触发每个钩子

  {menuItems.map(item => (
    <div className="grid-item">
        <input onClick={()=>checkfunction(name)} type="checkbox" id={item.id} checked={item.state}/>
        <label htmlFor={item.id}>{item.label}</label>
    </div>

无法识别map函数中的React js onClick函数

1 个答案: