实时搜索错误 [英] Live search bug
问题描述
我正在获取用户的首选项和角色，一切正常，数据接收正确.默认值放置在单选按钮上以突出显示用户当前拥有的选项.
我正在使用 Antd 设计表组件.
问题:当我将用户首选项更改为打印文档时，它确实通过 DB 的状态成功地更改了它，但是现在如果我搜索其他用户，与前一个出现在同一行的用户也将打印文档，因此看起来无论搜索后出现什么结果，对特定行所做的更改也会显示在同一行中，但结果不同.
class PreferenceUpdate extends PureComponent {构造函数(道具){超级(道具)；this.state = {用户偏好:props.preference}}handleChange = (事件) =>{this.setState({用户偏好:{偏好:事件.目标.值}});this.props.onPreferenceChange(event.target.value);};使成为() {返回 (<div><Radio.Group defaultValue={this.state.userPreference.isOnlineSystem} size={"small"}onChange={this.handleChange}><Radio.Button value={false}>打印文档</Radio.Button><Radio.Button value={true}>在线系统</Radio.Button></Radio.Group>)};}导出默认 PreferenceUpdate；常量列 = [{title: '电子邮件',数据索引:'电子邮件'，键:电子邮件"，渲染:(文本，记录)=><div className={"email-text"}>{record.email}</div>},{title: '偏好',数据索引:'isOnlineSystem'，键:'isOnlineSystem'，渲染:(文本，记录)=>{返回
);}}导出默认搜索输入；
为了让 Table Row 重置其属性，您需要提供一个键作为每一行使用.
您可以通过使用表上的 rowKey 属性来指定 TableRow 需要使用哪个属性作为键
I am fetching users preferences and roles, which works all fine and data received correctly.
Default value is placed on the radio buttons to highlight which option user currently have.
I am using Antd Design Table component .
Problem: When i am changing users preferences to printed documents, it successfully does change it by the state of DB however now if i search for other users, the user that appeared on the same row as the previous one will also have printed documents, so it looks like the no matter what results appeared after the search, the change made on the particular row will also be shown in the same row with different results.
class PreferenceUpdate extends PureComponent {
constructor(props) {
super(props);
this.state = {
userPreference: props.preference
}
}
handleChange = (event) => {
this.setState({
userPreference: {
preference: event.target.value
}
});
this.props.onPreferenceChange(event.target.value);
};
render() {
return (
<div>
<Radio.Group defaultValue={this.state.userPreference.isOnlineSystem} size={"small"}
onChange={this.handleChange}>
<Radio.Button value={false}>Printed Documents</Radio.Button>
<Radio.Button value={true}>Online System</Radio.Button>
</Radio.Group>
</div>
)
};
}
export default PreferenceUpdate;
const columns = [
{
title: 'Email',
dataIndex: 'email',
key: 'email',
render: (text, record) =>
<div className={"email-text"}>{record.email}</div>
},
{
title: 'Preference',
dataIndex: 'isOnlineSystem',
key: 'isOnlineSystem',
render: (text, record) => {
return <
PreferenceUpdate preference={record} onPreferenceChange={(value) => {
const payload = {isOnlineSystem: value, email: record.email};
setUserPreference(payload).then(r => {
if (r.status < 300) {
success("Preference was successfully updated");
} else {
errorWithMessage({
message: "Preference was not updated"
})
}
});
}
}/>
}
},
{
title: 'Role',
dataIndex: 'role',
key: 'role',
render: (text, record) => {
return <RoleUpdate role={record} onRoleChange={(role) => {
const payload = {role: role, email: record.email};
updateUserRole(payload).then(r => {
if (r.status < 300) {
success("Role was successfully updated");
} else {
errorWithMessage({
message: "Role was not updated"
})
}
});
}
}/>
}
}
];
const TextStyle = styled.div`
font-style: normal;
font-weight: 600;
font-size: 13px;
line-height: 16px;
color: #1B2F55;
margin-bottom: 10px
`;
class SearchInput extends React.Component {
constructor(props) {
super(props);
this.state = {
query: '',
results: [],
};
}
fetchSearchResults = (e) => {
getUserPreference(e).then(r => {
if (r.status < 300) {
this.setState({results: r.data});
} else {
errorWithMessage({
message: "Could not get data from the server"
})
}
})
};
handleInputChange = (e) => {
this.setState({
query: e.target.value
}, () => {
this.fetchSearchResults(this.state.query)
})
};
render() {
return (
<div className="container">
<h2 style={{marginTop: '200px'}} className="heading">User Search</h2>
<TextStyle>As an admin you are able to modify user's current preference state and current
role</TextStyle>
<Search
value={this.state.query}
style={{width: '100%', height: '35px'}}
placeholder={'Search....'}
onChange={this.handleInputChange}
/>
<div style={{marginTop: '15px'}}>
<Table size={"middle"}
columns={columns}
dataSource={this.state.results}
/>
</div>
</div>
);
}
}
export default SearchInput;
解决方案 In order for Table Row to reset its properties, you need to provide a key to be used as the each row.
You can specify which attribute you TableRow needs to use as a key by usiung rowKey attribute on table
<Table size={"middle"}
rowKey={'email'}
columns={columns}
dataSource={this.state.results}
/>
这篇关于实时搜索错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
登录
关闭
扫码关注1秒登录
发送“验证码”获取
|
15天全站免登陆