javascript - React hooks map 不是一个函数

Question

我想做的事情很简单。我有两个按钮，一个表示打开，一个表示关闭。当我单击其中之一时，我想将状态设置为 true 或 false(取决于单击的按钮)并使用新设置的 true false 值重新渲染。但由于某种原因，rows.map 不是一个函数。这是我到目前为止所拥有的:

function Calculator() {
    const [rows, setRows] = useState([

        {   
            rowVal: 0,
            editing: false,
            someVal: 20
        },
        {   
            rowVal: 1,
            editing: true,
            someVal: 20
        },

    ])
    return(
        <div className="container">
            <table className="table">
                <thead>
                    <tr>
                        <th className="text-center" scope="col">SomeVal</th>
                    </tr>
                </thead>
                <tbody>
                        {
                            const togOff = <button onClick={setRows({editing: false})}>Toggle Off</button>
                            const togOn = <button onClick={setRows({editing: true})}>Toggle On</button>
                            rows.map(val => {
                                if (val.editing === true){
                                    togOff
                                } else {
                                    togOn
                                }
                            })
                        }

                </tbody>
            </table>
        </div>
    )
}

如果有人能指出我正确的方向，那就太好了。

Answer 1

您的代码有几个问题。

1。您不能在返回值中声明变量

您需要在返回之前声明变量才能在{ }内使用它

错误

{
    const togOff = <button onClick={setRows({editing: false})}>Toggle Off</button> // wrong
    const togOn = <button onClick={setRows({editing: true})}>Toggle On</button> //wrong
    rows.map(val => {
        if (val.editing === true){
            togOff
        } else {
            togOn
        }
    })
}

右

...
const togOff = <button onClick={setRows({editing: false})}>Toggle Off</button> // outside the return
const togOn = <button onClick={setRows({editing: true})}>Toggle On</button> // outside the return
return (
    ...
)

2。您不能只调用 setRows({editing: true})，这将无限地重新渲染组件

错误

    const togOff = <button onClick={setRows({editing: false})}>Toggle Off</button> // wrong
    const togOn = <button onClick={setRows({editing: true})}>Toggle On</button> //wrong

右

    const togOff = <button onClick={ () => setRows({editing: false})}>Toggle Off</button> // Added arrow function
    const togOn = <button onClick={ () => setRows({editing: true})}>Toggle On</button> //Added arrow function

3。您需要在 .map 函数中返回一些内容

错误

rows.map(val => {
    if (val.editing === true){
        togOff //wrong
    } else {
        togOn //wrong
    }
})

右

rows.map(val => {
    if (val.editing === true){
        return togOff // use return 
    } else {
        return togOn // use return
    }
})

观察

完成所有这些操作后，您仍然遇到问题，因为您无法执行 setRows({editing: true}) 因为 rows 是一个数组，而不是像这样的对象{编辑:true}

请澄清您想要在 setRows 中执行的操作，以便我可以给出答案，但在此之前，您的错误已部分解决。

我无法 100% 确定错误消失后的预期结果是什么，但是 here是一个我认为你想要的工作演示。