我可以在 return 语句中使用 setTimeout

Question

如何在功能组件的 return 语句中 setTimeout/setInterval。

我有一个可重复使用的组件，我喜欢使用 setInterval 在每个设定的时间刷新它。

这是组件：

    function LikedBTN({ item }) {
    
      const handleLike = (id, action) => {
        var action = "like";
        setLiked(true);
        client
          .post("/pop/like/", { id, action })
          .then((res) => {
            // setLoading(false);
          })
          .catch((err) => {
            // setError(err);
            // setLoading(false);
          });
      };
    
      const handleUnlike = (id, action) => {
        var action = "unlike";
        setLiked(false);
        console.log(id, action);
        client
          .post("/pop/like/", { id, action })
          .then((res) => {
            // setLoading(false);
          })
          .catch((err) => {
            // setError(err);
            // setLoading(false);
          });
      };
    
      return (
        <View
          style={{
            flexDirection: "row",
            justifyContent: "flex-end",
            textAlignVertical: "center",
            textAlign: "center",
            paddingTop: 8,
          }}
        >
 // setInterval(() => {    --------------------- This is where I will like to use the setInterval
          {item.is_liked && (
            <>
              <AppText style={styles.like}>
                
                {item.likess}
              </AppText>
              <TouchableWithoutFeedback onPress={() => handleUnlike(item.id)}>
                <View
                  style={{
                    width: 45,
                    height: 45,
                    marginLeft: -9,
                    marginRight: -10,
                    marginTop: -15,
                  }}
                >
                  <LottieView
                    autoPlay
                    loop={false}
                    source={require("../assets/animations/like-burst.json")}
                  />
                </View>
              </TouchableWithoutFeedback>
            </>
          )}
    
          {!item.is_liked && (
            <>
              <AppText style={styles.like}>{item.likess}</AppText>
    
              <TouchableWithoutFeedback onPress={() => handleLike(item.id)}>
                <MaterialCommunityIcons
                  style={styles.chipsIcon}
                  name="heart-outline"
                  color={colors.mediumgray}
                  size={21}
                />
              </TouchableWithoutFeedback>
            </>
          )}
// }, 1000);  ------------------------ and end it here.
        </View>
      );
    }
    
    export default LikedBTN;

如果有任何帮助，我将不胜感激。

Answer 1

React 根本不是这样的结构。您不想手动重新呈现组件（您尝试这样做的方式只是一个语法错误）。您想要更新状态。

目前您要更改的状态似乎是：

item.is_liked

作为 prop 传递给组件：

function LikedBTN({ item }) {

所以大概你的组件在这样的地方使用：

<LikedBTN item={someItem} />

由于“项目”是在父组件中维护的，因此需要在该父组件中对其进行更新。一种方法是将回调函数作为另一个道具传递。所以你会像这样公开一个道具：

function LikedBTN({ item, onLike }) {

并在 AJAX 操作成功完成时调用该函数：

client
  .post("/pop/like/", { id, action })
  .then((res) => {
    onLike && onLike();
  })

然后父组件会提供一个函数来更新它的状态。例如：

<LikedBTN
  item={someItem}
  onLike={() => {
    // update the state of "someItem" here
  }}
/>

因此，由维护“项目”状态的组件来更新该状态。 LikedBTN 需要提供一个在需要更新状态时调用的回调。

我可以在 return 语句中使用 setTimeout

Can I use setTimeout in a return statement

javascript

setinterval

react-native