Ошибка живого поиска

Question

Я получаю настройки и роли пользователей, все работает нормально и данные принимаются правильно. Значение по умолчанию помещается на радиокнопки, чтобы выделить, какая опция есть у пользователя в данный момент.

Я использую компонент Antd Design Table.

Проблема: когда я меняю настройки пользователей на печатные документы, он успешно меняет их по состоянию БД, однако теперь, если я ищу других пользователей , пользователь, который появился в той же строке, что и предыдущий, также будет печатать документы, поэтому похоже, что независимо от того, какие результаты появляются после поиска, изменение, внесенное в конкретную строку, также будет отображаться в той же строке с разными результаты.

 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

Чтобы Строка таблицы сбрасывала свои свойства, необходимо указать ключ, который будет использоваться в качестве каждой строки.

Вы можете указать, какой атрибут TableRow должен использовать в качестве ключа, используя rowKey атрибут таблицы

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