React hooks map 不是函数
[英]React hooks map is not a function
问题描述
what I'm trying to do is simple.
我想要做的很简单。 I have two buttons, one that says toggle on and one that says toggle off.我有两个按钮，一个表示打开，一个表示关闭。 When I click one of them, I want to set my state to true or false (depending on which button was clicked) and re render, using the newly set true false values.当我单击其中一个时，我想将状态设置为 true 或 false（取决于单击的按钮）并使用新设置的 true false 值重新渲染。 But for some reason, rows.map is not a function.但出于某种原因，rows.map 不是一个函数。 Here is what I have so far:这是我到目前为止所拥有的：
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>
)
}
If anyone can point me in the right direction, that would be great.如果有人能指出我正确的方向，那就太好了。
6 个解决方案
解决方案1
1 2019-04-25 14:25:28
what I'm trying to do is simple.我想做的很简单。 I have two buttons, one that says toggle on and one that says toggle off.我有两个按钮，一个表示打开，另一个表示关闭。 When I click one of them, I want to set my state to true or false (depending on which button was clicked) and re render, using the newly set true false values.当我单击其中之一时，我想使用新设置的true false值将状态设置为true或false（取决于单击的按钮）并重新呈现。 But for some reason, rows.map is not a function.但是由于某些原因，rows.map不是函数。 Here is what I have so far:这是我到目前为止的内容：
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>
)
}
If anyone can point me in the right direction, that would be great.如果有人能指出我正确的方向，那就太好了。
解决方案2
0 2019-04-25 14:22:39
what I'm trying to do is simple.我想做的很简单。 I have two buttons, one that says toggle on and one that says toggle off.我有两个按钮，一个表示打开，另一个表示关闭。 When I click one of them, I want to set my state to true or false (depending on which button was clicked) and re render, using the newly set true false values.当我单击其中之一时，我想使用新设置的true false值将状态设置为true或false（取决于单击的按钮）并重新呈现。 But for some reason, rows.map is not a function.但是由于某些原因，rows.map不是函数。 Here is what I have so far:这是我到目前为止的内容：
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>
)
}
If anyone can point me in the right direction, that would be great.如果有人能指出我正确的方向，那就太好了。
解决方案3
0 2019-04-25 14:26:42
what I'm trying to do is simple.我想做的很简单。 I have two buttons, one that says toggle on and one that says toggle off.我有两个按钮，一个表示打开，另一个表示关闭。 When I click one of them, I want to set my state to true or false (depending on which button was clicked) and re render, using the newly set true false values.当我单击其中之一时，我想使用新设置的true false值将状态设置为true或false（取决于单击的按钮）并重新呈现。 But for some reason, rows.map is not a function.但是由于某些原因，rows.map不是函数。 Here is what I have so far:这是我到目前为止的内容：
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>
)
}
If anyone can point me in the right direction, that would be great.如果有人能指出我正确的方向，那就太好了。
解决方案4
0 2019-04-25 14:50:18
what I'm trying to do is simple.我想做的很简单。 I have two buttons, one that says toggle on and one that says toggle off.我有两个按钮，一个表示打开，另一个表示关闭。 When I click one of them, I want to set my state to true or false (depending on which button was clicked) and re render, using the newly set true false values.当我单击其中之一时，我想使用新设置的true false值将状态设置为true或false（取决于单击的按钮）并重新呈现。 But for some reason, rows.map is not a function.但是由于某些原因，rows.map不是函数。 Here is what I have so far:这是我到目前为止的内容：
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>
)
}
If anyone can point me in the right direction, that would be great.如果有人能指出我正确的方向，那就太好了。
解决方案5
0 2019-12-16 11:53:26
what I'm trying to do is simple.我想做的很简单。 I have two buttons, one that says toggle on and one that says toggle off.我有两个按钮，一个表示打开，另一个表示关闭。 When I click one of them, I want to set my state to true or false (depending on which button was clicked) and re render, using the newly set true false values.当我单击其中之一时，我想使用新设置的true false值将状态设置为true或false（取决于单击的按钮）并重新呈现。 But for some reason, rows.map is not a function.但是由于某些原因，rows.map不是函数。 Here is what I have so far:这是我到目前为止的内容：
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>
)
}
If anyone can point me in the right direction, that would be great.如果有人能指出我正确的方向，那就太好了。
解决方案6
0 2021-10-08 03:48:32
rows.length>0 && rows.map((val) => {
if (val.editing === true) {
togOff;
} else {
togOn;
}
});
Just check the length before going for the map.在去地图之前检查长度。 If it is more than 0 then go for it.如果它大于0，那就去吧。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.