Как убрать зависимость отрендереных методом .map компонентов друг от друга?

Question

[Антон]

Добрый всем день.

Есть что-то подобное:

function Example () {
    const [message, setMessage] = React.useState(false);
    const sendMessage = (id, message) => () => {
        const data = {
            ID: id,
            MESSAGE: message,
        };
        sendMessage(data); //Это действие Redux, оно особого отношения к делу не имеет.
        setMessage(true);
return (
    arr1.map(i) => {
        <Grid>
            <Button onClick={sendMessage(i, message)>
                Отправить
            </Button>
            {message !== null && (
                <font>Отправлено</font>
             )}
          </Grid>

Дело в том, что если нажать кнопку Отправить на любой итерации массива arr1, то строка перерендеривается на всех итерациях.
Как отделить каждый элемент массива, в отдельный компонент, со своими данными внутри?

Comments

[Dima Polos]

Где key???

[alex4answ]

Какая строки перерендеривается?
где у вас используется редакс ? если вы локальное состояние используйте

Дайте рабочий пример, ничего не понятно

[Антон]

Dima Polos,

function Example () {
    const [message, setMessage] = React.useState(false);
    const sendMessage = (id, message) => () => {
        const data = {
            ID: id,
            MESSAGE: message,
        };
        sendMessage(data); //Это действие Redux, оно особого отношения к делу не имеет.
        setMessage(true);
return (
    arr1.map(i) => {
        <Grid key={i.id}> // Вот тут key
            <Button onClick={sendMessage(i, message)>
                Отправить
            </Button>
            {message !== null && (
                <font>Отправлено</font>
             )}
          </Grid>
);

[Dima Polos]

Антон, в примере из вопроса его не было)

[Антон]

Dima Polos, не было. Я работаю из закрытой корпоративной сети, код не могу весь скинуть. Поэтому тут примерно описал кусок, где проблема.

[Dima Polos]

Антон, я понял, ну первое - отсутствие key бросилось в глаза, без него реакт не видит разницы между компонентами и потому может вызывать ререндер. Второе, я заметил, что все компоненты зависят от message, и судя по всему все от одного, получается, если поменяется message надо сделать ререндер компонентов, которые от него зависят, а это по сути все компоненты? может я что не то говорю, но быстрым взглядом вижу пока это

[Антон]

Dima Polos, По факту у меня рендерится здаровенный компонент, в котором есть более мелкие компоненты, например текстовое поле "Сообщение" и кнопка "Отправить". Этот большой компонент редрерится перебором .map.
Кнопка "Отправить" выглядит

<Button onClick={sendMessage(i, message}>
    Отправить
</Button>

То есть, при ее нажатии вызывается функция которая берет всякие нужные данные и пересылает их дальше. Я же не буду писать кучу копий функции sendMessage, чтобы каждый отрендереный большой компонент ссылался к "своей" функции.
От сюда и вопрос, как сделать, чтобы использовать одну и туже функцию в разных итерация перебора, но информацию обновлять только в нужной итерации.

Answer 1

[Robur]

1. они не зависят друг от друга, вы меняете стейт компонента и рендер вызывается заново. Это нормальное поведение.
2. переменная message - одна на всех, если вы ее поменяете то во всех разом произойдет изменение - добавится или удалится "отправлено".
Если у вас проблема в том что вы нажимаете отправить в одном компоненте, а "отправлено" появляется во всех - а хочется чтобы в каждом было свое "отправлено" то вам надо сделать для каждой строки отдельный флаг. Лучше всего - сделать то что внутри Grid отдельным компонентом и перенести message/setMessage туда.