配列に新しい要素を追加するか、既存のものを更新する（状態に反応）

アントナイ・ケピンスキー：

私は、テキストボックスと2列のインターフェースを持つ式パーサーを、構築しています。あなたは左（例：上の式を入力し1+2）、あなたは右の上の結果を参照してください。各行における発現は、文字列の配列に追加されるので、好き：

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

今、私は機能と、各式を解析し、その結果を含む別の配列（の状態に反応）、それを渡したいです：

['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
]

私は前の式を変更すると残念ながら、現在、新しい要素は、結果の配列に追加されます。

SSK：

あなたがで状態にそれを追加し続けるため、新しい要素が追加され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);