Задать вопрос
Esmeralda33
@Esmeralda33

Как сделать, чтобы при каждом клике мыши приложение заново не пересоздавало массив?

Я новичок в React, делаю приложение с рандомным массивом, чтобы потом сравнивать с ним другой массив.
Проблема в том, что вначале создается рандомным массив (код ниже), но и потом при каждом клике мыши приложение заново пересоздает этот рандомный массив.
А весь смысл приложения в том что сравнивать нужно с одним массивом! Что делать?

import React, {useState} from 'react';
import {StyleSheet, View, Text, Button} from "react-native";

function Block() {
const ranomdArr = function() {
    let array = ['faith', 'hope', 'love', 'gratitude', 'patience', 'mercy'];
    var currentIndex = array.length, temporaryValue, randomIndex;
  
    while (0 !== currentIndex) {
      randomIndex = Math.floor(Math.random() * currentIndex);
      currentIndex -= 1;
  
      temporaryValue = array[currentIndex];
      array[currentIndex] = array[randomIndex];
      array[randomIndex] = temporaryValue;
      }
    return array;
  }

const [fetus, setFetus] = useState(['0', '1', '2', '3', '4', '5']);
let refCopy= React.createRef();
let refOut= React.createRef();

function show(e) {
  let index = e.target.parentElement.firstChild.getAttribute('index');
  let copy = Object.assign([], fetus);
  copy[index] = e.target.innerHTML;
  setFetus(copy);
}

function Goods(props) {
  return(
    <View style={styles.sell}>
      <h7 index={props.index}></h7>
      <Text style={styles.text} onPress={show}>{props.faith}</Text>
      <Text style={styles.text} onPress={show}>{props.hope}</Text>
      <Text style={styles.text} onPress={show}>{props.love}</Text>
      <Text style={styles.text} onPress={show}>{props.gratitude}</Text>
      <Text style={styles.text} onPress={show}>{props.patience}</Text>
      <Text style={styles.text} onPress={show}>{props.mercy}</Text>
    </View>
  )
}
const fruit = [
    {index:0,text:'faith',text:'hope',text:'love',text:'gratitude',text:'patience',text:'mercy'},
    {index:0,text:'faith',text:'hope',text:'love',text:'gratitude',text:'patience',text:'mercy'},
    {index:0,text:'faith',text:'hope',text:'love',text:'gratitude',text:'patience',text:'mercy'},
    {index:0,text:'faith',text:'hope',text:'love',text:'gratitude',text:'patience',text:'mercy'},
  ];
  const result = fetus.map((element, index) => {
    return <View style={styles.sell}> <Text style={styles.text} key={index}>{element}</Text></View>;
 });

function score() {
  console.log(ranomdArr());
  let iter = '0';
  for(let i=0; i<refCopy.current.children.length; i++) {
    if(refCopy.current.children[i].innerText === ranomdArr()[i]) {
      iter++;
    }
  }
 refOut.current.innerHTML += refCopy.current.outerHTML+ 'Score: '+ iter;
}
  return (
      <>
      <View ref={refOut}></View>
      <View style={styles.tabl} ref={refCopy}>{result} </View>
      <Button title="Try it!" color="#f212ff" onPress={score}/>
      <View style={styles.tabl}> 
      {fruit.map(item=><Goods index={item.index} faith={item.faith} hope={item.hope} love={item.love} gratitude={item.gratitude} patience={item.patience} mercy={item.mercy}/>)}
      </View>
      </>
    )
}
  • Вопрос задан
  • 92 просмотра
Подписаться 1 Простой 1 комментарий
Ответ пользователя Semantic.Moscow К ответам на вопрос (2)
SemanticMoscow
@SemanticMoscow
проверяйте, существует ли то, что не нужно заново создавать,
если true, то пропускаем "создание" и идём дальше
Ответ написан