Live search bug

问题

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;

回答1:

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}
/>

来源：https://stackoverflow.com/questions/62101695/live-search-bug