实时搜索错误

Question

我正在获取用户的偏好和角色，这可以正常工作并且可以正确接收数据。默认值位于单选按钮上，以突出显示用户当前具有的选项。

我正在使用Antd设计表组件。

问题：当我将用户首选项更改为打印文档时，它确实会成功地按照数据库状态进行更改，但是现在，如果我搜索其他用户，则与上一个用户位于同一行的用户也将具有打印文档，因此无论搜索后出现什么结果，看起来在特定行上所做的更改也将显示在同一行中，但结果不同。

 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;

Answer 1

为了使表行重置其属性，您需要提供一个用作每个行的键。

您可以通过使用表上的rowKey属性指定TableRow需要将哪个属性用作键

<Table size={"middle"}
    rowKey={'email'}
    columns={columns}
    dataSource={this.state.results}
/>