React Native 滑块重新渲染为 0答案

【问题标题】：React Native slider re-renders to 0React Native 滑块重新渲染为 0
【发布时间】：2021-08-11 12:56:18
【问题描述】：

我正在创建一个项目，通过单击主页上的按钮，将打开一个模式，其中包含一些滑块和开关。您可以更改这些滑块和开关的值并关闭模式。但是当您打开模式备份时，它应该显示更改的值。当我关闭我的模态并再次打开它时，我的所有滑块和开关都会以值 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 .

【问题讨论】：

标签： javascript reactjs react-native slider

【解决方案1】：

我认为您的状态更改部分有问题，所以我给您的建议是将“Chooser”功能转换为组件。为了消除值的错误显示，useEffect 将检测 props 更改并更新组件中的状态。例如：

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

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

      default:
        return (<View />)
    }
   }

  return ItemRender()
});

export default Chooser;

然后从你使用这个组件的地方将任务作为道具传递。

<Chooser task={yourTaskData} />

【讨论】：

【解决方案2】：

您应该将 onValueChange 添加到您的滑块组件中。

onValueChange={(val) => setTaskValue(val)}

我还没有尝试过你的代码，但这应该会让你走上正确的道路。

【讨论】：