reactjs - 在平面列表 onpress 中更改按钮的背景颜色

Question

我的平面列表中有一些按钮，如下所示

const renderItem = ({ item }) => <Item name={item.name} slug={item.slug} />;

  const Item = ({ name, slug }) => {
    return (
      <TouchableOpacity
        delayPressIn={0}
        onPress={() => {
          dispatch(setLanguage(slug));
        }}
      >
        <View
          style={[
            styles.item,
            { backgroundColor: languages == slug ? "#940062" : "black" },
          ]}
        >
          <Text style={styles.title}>{name}</Text>
        </View>
      </TouchableOpacity>
    );
  };

  return (
    <SafeAreaView style={styles.container}>
      <FlatList
        horizontal={true}
        data={jsonLang}
        renderItem={renderItem}
        keyExtractor={(item) => item.id.toString()}
      />
    </SafeAreaView>
  );
};

上面的代码工作正常，当我点击它时正在改变背景？但是背景颜色的变化会延迟 1 秒。这是更改按钮背景颜色的正确方法吗？

谢谢。

P.S: setlanguage 是我的 redux 中的 reducer

 setLanguage: (state, action) => {
      state.language = action.payload;
    },

Answer 1

它运行得非常快，这是一个 example我创造了。

也许延迟在 reducer 中。所以我人为地放慢了速度。

const setLanguage = (languages) => {
  return (dispatch) => {
    setTimeout(()=>{
      dispatch({
        type: "setLanguage",
        value: languages
      });
    }, 1000) // <--------------------- delay
  };
}

但现在我们需要使样式应用得更快。我在 next_languages 状态中添加了另一个字段:

const initialState = {
   languages: "1",
   next_languages: "1"
}

修改代码如下:

const setLanguage = (languages) => {
  return (dispatch) => {

    dispatch({ // <-------------- for apply style quiqly
      type: "setNextLanguage",
      value: languages
    });

    setTimeout(()=>{
      dispatch({
        type: "setLanguage",
        value: languages
      });
    }, 1000)
  };
}

还在组件中添加了常数:

const fastLang = languages === next_languages 
                   ? languages 
                   : next_languages;

最后，样式就这么设置了，还是很快

{ backgroundColor: fastLang == slug ? "#940062" : "yellow" }

我认为你甚至可以用一个变量来解决问题(也许这与工作逻辑相矛盾)，但这已经是重构了。

希望能帮到你。