React inmutability挑战：带连词的不可变数组。

Question

我尝试了所有的方法来使其不可改变，但都没有成功。

变化的数组

const [answers, setAnswers] = useState([]);

一个运行我的循环的按钮

onClick={ async() => my function}

一个函数，运行N个请求，逐一更新答案矩阵。

const myFunction = async () => { 

var results = [] 
for (let url of listOfUrls) {

try { answer = await apiCall(url)
results= [...results].concat(answer);
setAnswers(results);
 } catch (err) {}
} }

问题: 我在更新var result

要求: 试着在不使用变异结果的情况下这样做

我的尝试

const myFunction = async () => { 
//naively cleaning my answers on each button click
setAnswers([])

//and then starting the loop
for (let url of listOfUrls) {

try { 
answer = await apiCall(url)
setAnswers([...answers].concat(answer));
 } catch (err) {}
} }

我的尝试结果： 如果 "Answers "在进程开始时不是空的，即使我用setAnswers([])清理了它，"Answers "的后续使用也会得到旧的值，然后将旧的请求添加到新的请求中。它们无限期地堆叠

工作实例。https:/codesandbox.iosfunny-smoke-l9sf2?file=srcApp.js。

Answer 1

你想使用一个 功能更新:

setAnswers([])

for (let url of listOfUrls) {
  try { 
    const newAnswers = await apiCall(url)
    setAnswers(answers => answers.concat(newAnswers));
  } catch (err) {}
}

注意： setAnswers(…) 不改变 answers 可变的。