React inmutability challenge: неизменяемый массив с конкатенациями - PullRequest
Новая
       67

React inmutability challenge: неизменяемый массив с конкатенациями

2 голосов
/ 16 июня 2020

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

Массив, который изменится: 

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

Кнопка, запускающая мой l oop

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

Запрос : Попробуйте сделать это без использования результата var

Моя попытка: 

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) {}
} }

Результат моей попытки: если «Ответы» не были пустыми в начале процесса, даже если я очищу его с помощью setAnswers ([]), следующее использование «ответов» получит старое значение, а затем добавлю старые запросы к новым. Они складываются бесконечно

Рабочий пример: https://codesandbox.io/s/funny-smoke-l9sf2?file= / src / App. js

1 Ответ

1 голос
/ 16 июня 2020

Вы хотите использовать функциональное обновление : 

setAnswers([])

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

Обратите внимание, что setAnswers(…) не изменяет переменную answers.

...