javascript - React Native 滑块重新渲染为 0

问题描述

我正在创建一个项目，通过单击主页上的按钮，将打开一个模式，它有一些滑块和开关。您可以更改这些滑块和开关的值并关闭模式。但是当您打开模式备份时，它应该显示更改的值。当我关闭我的模态并再次打开它时，我的所有滑块和开关都以值 0 呈现。

开关和滑块的代码（在名为“TaskListEdit”的组件中）：

const Chooser = (task) => {
    switch (task.inputType) {
      case "slider":
        return (
          <Slider
            style={{ width: 200, height: 40 }}
            minimumValue={0}
            maximumValue={100}
            minimumTrackTintColor="#ff9900"
            maximumTrackTintColor="#9494b8"
            value={task.value}
            onSlidingComplete={(sliderValue) =>
              addModifiedTasks(task, sliderValue)
            }
          />
        );

      case "switch":
        return (
          <Switch
            trackColor={{ false: "#767577", true: "#81b0ff" }}
            thumbColor={isEnabled ? "#f5dd4b" : "#f4f3f4"}
            ios_backgroundColor="#3e3e3e"
            onValueChange={(switchValue) => {
              addModifiedTasks(task, switchValue);
            }}
            value={isEnabled}
          />
        );
    }
  };

以及模式的代码（在不同的组件中）：

     <Modal
          animationType="fade"
          transparent={true}
          visible={modalVisible}
          supportedOrientations={["portrait", "landscape"]}
        >
          <Pressable
            onPress={() => setModalVisible(!modalVisible)}
            style={{
              flex: 1,
              alignItems: "center",
              justifyContent: "center",
              backgroundColor: "rgba(0,0,0,0.5)",
            }}
          >
            <View style={styles.centeredView}>
              <View style={styles.modalView}>
                <TaskListEdit
                  tasks={tasks}
                  statefunction={setCellTasks}
                  cellTasks={cellTasks}
                  setModalVisible={setModalVisible}
                />
                <Button
                  title="Back"
                  style={styles.buttonClose}
                  onPress={() => setModalVisible(!modalVisible)}
                />
              </View>
            </View>
          </Pressable>
        </Modal>

为了测试滑块，我console.log在选择器函数中包含了要输出task.value的值，实际上该值是正确的。例如，如果我将滑块更改为 45，它返回 45，但是，滑块显示 0。这让我很困惑，因为我不明白，滑块的值如何输出正确的数字但显示保持在 0 .

标签： javascriptreactjsreact-nativeslider

javascript - React Native 滑块重新渲染为 0

问题描述

解决方案

推荐阅读