在React Native中,我该如何解决 setNativeProps 被弃用的错误?

huangapple go评论53阅读模式
英文:

In react-native how can I solve error setNativeProps is deprecated?

问题

当我点击文本值名称时,模态框显示出来。这是正确的,完全符合我的要求。

但是在控制台中,我看到了这个错误。
setNativeProps is deprecated. Please update props using React state instead.

我的代码:

import React, { useState } from "react";
import { Button, Text, View, TouchableOpacity } from "react-native";
import styles from "./styles";
import TextModal from "../Modal/TextModal";
import Modal from "react-native-modal";

const Placeholders = (props) => {
  const [isModalVisible, setIsModalVisible] = useState(false);
  const [numberClicked, setNumberClicked] = useState(-1);

  const toggleModalVisibility = (index) => {
    console.log(index);
    setIsModalVisible(!isModalVisible);
    setNumberClicked(index);
  };

  const showEveryValue = () => {
    let values = [];
    let keyCounter = 0;
    props.values.forEach((value) => {
      values.push(
        <View key={keyCounter++}>
          <Text onPress={() => toggleModalVisibility(value.number)}>
            {value.name}
          </Text>
        </View>
      );
    });
    return values;
  };

  return (
    <>
      {showEveryValue()}
      <Modal isVisible={isModalVisible} style={styles.modal}>
        <TouchableOpacity
          onPress={() => toggleModalVisibility()}
          style={styles.touchableOpacity}
        >
          <TextModal numberClicked={numberClicked} />
        </TouchableOpacity>
      </Modal>
    </>
  );
};

export default Placeholders;

如何解决这个问题?

这个页面上我看到这是与react-native包有关的问题。这是真的吗?还是错误出现在我的代码中的某个地方?

英文:

When I click on Text value.name modal is shown. That is correct, exactly like I want.

But in console, I have this error.

setNativeProps is deprecated. Please update props using React state instead.

My code:

import React, {useState} from &quot;react&quot;;
import {Button, Text, View, TouchableOpacity} from &quot;react-native&quot;;
import styles from &quot;./styles&quot;;
import TextModal from &quot;../Modal/TextModal&quot;;
import Modal from &quot;react-native-modal&quot;;

const Placeholders = (props) =&gt; {
    const [isModalVisible, setIsModalVisible] = useState(false);
    const [numberClicked, setNumberClicked] = useState(-1);

    const toggleModalVisibility = (index) =&gt; {
        console.log(index);
        setIsModalVisible(!isModalVisible);
        setNumberClicked(index);
    };

    const showEveryValue = () =&gt; {
        let values = [];
        let keyCounter = 0;
        props.values.forEach((value) =&gt; {
            values.push(
                &lt;View
                    key={keyCounter++}
                &gt;
                    &lt;Text
                        onPress={() =&gt; toggleModalVisibility(value.number)}
                    &gt;
                        {value.name}
                    &lt;/Text&gt;
                &lt;/View&gt;
            );
        });
        return values;
    };

    return (
        &lt;&gt;
            {showEveryValue()}
            &lt;Modal
                isVisible={isModalVisible}
                style={styles.modal}
            &gt;
                &lt;TouchableOpacity
                    onPress={() =&gt; toggleModalVisibility()}
                    style={styles.touchableOpacity}
                &gt;
                    &lt;TextModal
                        numberClicked={numberClicked}
                    /&gt;
                &lt;/TouchableOpacity&gt;
            &lt;/Modal&gt;
        &lt;/&gt;
    );
};

export default Placeholders;

How to solve this problem?

On this page I read that it is problem with react-native packages. Is it true? Or the error is somewhere in my code?

答案1

得分: 2

你说得对,根据 你的链接
截止到2023年2月7日,React Native团队正在解决这个问题。目前还没有关于这个问题的解决方案或变通方法。

英文:

You are right, according to your link:
As 2023–02–07, React Native team is working on this issue. There is no solution or workaround on this issue.

huangapple
  • 本文由 发表于 2023年2月19日 16:40:50
  • 转载请务必保留本文链接:https://go.coder-hub.com/75498923.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定