javascript - 地图没有返回正确的对象数组
问题描述
试图做一个映射来将 selected 的值设置为 true 和 false 但它不会改变现有的 true 值,这是怎么回事?
selectTab = tab => e => {
const { data } = this.state;
this.setState(
{
data: data.map(o =>
o.tab === tab ? { selected: true, ...o } : { selected: false, ...o }
)
},
() => console.log(this.state.data)
);
};
解决方案
尝试先传播对象,然后添加selected
属性。否则selected
in 的属性o
每次都会覆盖它。
selectTab = tab => e => {
this.setState(
prevState => ({
data: prevState.data.map(o =>
o.tab === tab ? { ...o, selected: true } : { ...o, selected: false }
)
}),
() => console.log(this.state.data)
);
};
class App extends React.Component {
state = {
data: [
{
tab: 1,
content: "Tab 1 content",
selected: true
},
{
tab: 2,
content: "Tab 2 content"
},
{
tab: 3,
content: "Tab 3 content"
}
]
};
selectTab = tab => e => {
this.setState(
prevState => ({
data: prevState.data.map(o =>
o.tab === tab ? { ...o, selected: true } : { ...o, selected: false }
)
}),
() => console.log(this.state.data)
);
};
render() {
const { activeTab, data } = this.state;
return (
<div>
{data.map(obj => (
<div onClick={this.selectTab(obj.tab)}>{obj.tab}</div>
))}
{data.map(obj => (
<div>{obj.selected && obj.content}</div>
))}
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>
推荐阅读
- android - Android 上的 Kivy:如何在应用更新后保留本地保存的文件?
- reactjs - 测试 Apollo Mutation graphql 错误
- scala - Scala - 用另一列填充“空”列
- google-chrome - Chrome 存储 API 密钥正在重置
- c++ - 使用异常的 C++ 程序是否需要在其主函数中包含 try/catch 块?
- vue.js - Vue JS 嵌套列表:将 props 传递给子级和子级的子级
- php - 从 PHP 电子表格导出 Excel 文件。当我添加一定数量的 "Echo" 时,会出现奇怪的字符串输出并且不会导出
- docker - 使用 docker-compose 挂载将跨主机更改的卷
- java - 使用 Spring 应用程序事件,我如何命令 EventListeners 在同一个类中侦听不同的事件?
- android - Android Studio - 资产工作室不工作