Блог

Главная - Вопросы по программированию - Как предотвратить обновление страницы при нажатии кнопки в функции React Native

Как предотвратить обновление страницы при нажатии кнопки в функции React Native

#javascript #react-native

Вопрос:

В приведенной ниже собственной функции React мы хотим остановить инициализацию случайного массива при каждом нажатии кнопки. В настоящее время, когда мы нажимаем кнопку, счетчик увеличивается, а массив снова инициализируется. Любая помощь была бы очень признательна.

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

const Game1 = (props) => {
  const [count, setCount] = useState(0);

  handlePress = () => {
      // if (selectedNoArry == 0) {
      setCount(count   1);
      // selectedNoArry.concat(index);
      // console.log(selectedNoArry);
      // }
      //return false;
  };

  const randomNoArry = Array.from(
    {length: props.randomnno},
    x => 1   Math.floor(10 * Math.random()),
  );

  return (
    <View>
      <Text style={{marginTop: 40}}>
        you hit {count}!
      </Text>
      <Text style={{marginTop: 40}}>
       this is randomn {randomNoArry}!
      </Text>
      <Button style={{marginTop: '40'}}
         onPress={() => handlePress()}
         title="click Me"
      
      />
    </View>
  );
}

const Game = () => {
  return (
    <>
      <Game1 randomnno="6" />
    </>
  );
}

export default Game;

Чтобы проверить, пожалуйста, скопируйте и вставьте приведенный выше код здесь

Комментарии:

1. Вы можете использовать крючок useMemo для запоминания randomNoArry переменной. const randomNoArry = useMemo(() => Array.from({ length: props.randomnno }, (x) => 1 Math.floor(10 * Math.random())),[props.randomnno]);

2. useMemo работает хорошо, спасибо

Ответ №1:

Вы можете поместить данные в useRef() или useState() предотвратить их автоматическое восстановление.

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

const genRanArr = (length) =>
  Array.from({ length: length }, (x) => 1   Math.floor(10 * Math.random()));

const Game1 = (props) => {
  const [count, setCount] = useState(0);
  const [randomArray, setRandomArray] = useState(genRanArr(props.name));

  const handlePress = () => {
    setCount(count   1);
  };

  return (
    <View>
      <Text style={{ marginTop: 40 }}>you hit {count}!</Text>
      <Text style={{ marginTop: 40 }}>this a randomn {randomArray}!</Text>
      <Button
        style={{ marginTop: "40" }}
        onPress={() => handlePress()}
        title="click Me"
      />
    </View>
  );
};

const Game = () => {
  return (
    <>
      <Game1 name="6" />
    </>
  );
};

export default Game;

Комментарии:

1. Большое спасибо, работает хорошо. Я не знал, что компонент перерисовывается при использовании состояния.

Метки: