如何在本机反应中从不同组件更改另一个组件的 state？

Question

我正在创建一个待办事项应用程序，其中单击按钮时将显示一个对话框，单击按钮取消时需要将其关闭。 我有两个组件：

AddTodo.js

import { Modal, StyleSheet, Text, TouchableOpacity, View } from "react-native";
import { GetInfoDialog } from "./GetInfoDialog";
import { React, useState } from "react";


function useChange() {
  const [state, setState] = useState(false);
  function change(value) {
    setState(value);
    console.log("state: " + value);
  }

  return { state, change };
}

function AddTodo() {
  const { state, change } = useChange();

  return (
    <View style={styles.container}>
      <Modal
        animationType="slide"
        transparent={true}
        visible={state}
        style={styles.itemsContainer}
      >
        <GetInfoDialog />
      </Modal>

      <TouchableOpacity
        style={styles.btn}
        onPress={() => {
          change(true);
          // console.log("btn click: " + clicked);
        }}
      >
        <Text style={styles.text}>Add New</Text>
      </TouchableOpacity>
    </View>
  );
}

和 GetDialogInfo.js

import react, { useState } from "react";
import { useChange } from "./AddTodo";
import {
  StyleSheet,
  Text,
  TextInput,
  TouchableOpacity,
  View,
} from "react-native";

function GetInfoDialog() {
  const { state, change } = useChange();

  return (
    <View style={styles.container}>
      <Text style={styles.headerText}>Add Todo</Text>
      <TextInput style={styles.input} />
      <View style={styles.btnContainer}>
        <TouchableOpacity style={styles.btn}>
          <Text style={styles.text}>Add</Text>
        </TouchableOpacity>
        <TouchableOpacity
          style={styles.btn}
          onPress={() => {
            change(false);
          }}
        >
          <Text style={styles.text}>Cancel</Text>
        </TouchableOpacity>
      </View>
    </View>
  );
}

我尝试使用更改 function 更改 state 但 state 没有更改。

Answer 1

您编写的 useChange 函数用作自定义挂钩。 它不连接两个组件。 我能知道你的要求是什么吗？

Answer 2

您正在尝试共享state并change不同的组件： AddTodo和GetInfoDialog by const { state, change } = useChange();

但这在您的应用程序中是不可能的，因为您实际上创建了 2 个state并通过您的自定义钩子change s。

要共享它，您需要定义它们一次并将它们作为道具传递给GetInfoDialog 。

例如

GetInfoDialog({state, change})  {

  // Remove the below line and get state and change from props.
  // const { state, change } = useChange();
  ...
  ...
}

并通过state并在您的AddTodo中创建change 。

     <Modal
        animationType="slide"
        transparent={true}
        visible={state}
        style={styles.itemsContainer}
      >
        <GetInfoDialog state={state} chagne={change} />
      </Modal>

Answer 3

1. 组件可以是父组件的 2 个子组件，或者其中一个是另一个子组件，您将共享的 state 放在父组件中，并将子组件作为道具传递给它。

const ParentComponent = () => {
    const [someState, setSomeState] = useState()
    return (
        <>
            <ComponentOne someState={someState} setSomeState={setSomeState}/>
            <ComponentTwo someState={someState} setSomeState={setSomeState}/>
        </>
    )
}

2. 使用 React Context 在组件之间共享 state（不推荐，除非您知道性能缺陷以及如何缓解它们）
3. 使用第 3 方 state 管理库（zustand、redux 工具包等）