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);

向数组添加新元素或更新现有元素（反应状态）

1 个答案: