Добавить новый элемент в массив или обновить существующий (состояние React)

Question

Я создаю синтаксический анализатор выражений, который имеет интерфейс из 2 столбцов с текстовыми полями. Вы вводите выражение слева (например, 1+2), и вы видите результат справа. Выражение в каждой строке добавляется в массив строк, например:

12+3
1-2        --->   ['12+3', '1-2', 44+2']
44+2

Теперь я хочу проанализировать каждое выражение с помощью функции и передать его в другой массив (состояние React), который содержит результаты:

['12+3', '1-2', 44+2'] --> [15, -1, 46]

Это код (он запускается каждый раз, когда изменяется значение левого текстового поля):

const [results, setResults] = useState([]);

expressions?.map(async exp => {
    // Custom function that evaluates the expression
    const parsed = await parse(exp);
    const concat = [...results, parsed];

    setResults(concat.filter((item, pos) => concat.indexOf(item) === pos));
});

Я бы хотел, чтобы результаты были актуальными с выражениями, поэтому что при изменении одного из них результат этого выражения обновляется:

Expressions:
[
    '10+5',
    '5+5',  <-- User changes 5 to 3
    '3+3'
]

Results:
[
    15,
    10,  <-- Instantly changes to 8 (no new element is added)
    6
]

К сожалению, в настоящее время новый элемент добавляется в массив результатов после изменения предыдущего выражения.

Answer 1

Новые элементы добавляются, потому что вы продолжаете добавлять его в состояние с помощью concat = [...results, parsed]; Попробуйте это.

const [results, setResults] = useState([]);
let concat = []
expressions?.map(async exp => {
    // Custom function that evaluates the expression
    const parsed = await parse(exp);
    concat = [...concat, parsed];    
});
setResults(concat);