如何在 onPress 上更改功能组件中的道具值答案

【问题标题】：How to change props value in functional component on onPress如何在 onPress 上更改功能组件中的道具值
【发布时间】：2022-01-24 11:00:51
【问题描述】：

我使用FlatList进行数据展示，也使用组件进行展示。

<FlatList
                  contentContainerStyle={{ paddingBottom: 50 }}
                  data={postList}
                  renderItem={renderItem}
                  keyExtractor={(item, index) => index.toString()}
                  refreshing={refreshing}
                  onRefresh={_onRefresh}
                />

const renderItem = (item) => {
      return(
        <FeedMainStoryCard
          feedTittle={item.item.feedTittle}
          feedimage={item.item.feedImage}
          isUserLike={item.item.isLike}
        />
      )
  }

这里是 FeedMainStoryCard.js 文件

<TouchableOpacity
            onPress={onPressHeart}
          >
            <Ionicons name={props.isUserLike === true ? "ios-heart-sharp" : "ios-heart-outline"} />
          </TouchableOpacity>

那么如何更改 OnPress 方法上的 isUserLike 值，例如 true 和 false，然后更改 <Ionicons name={props.isUserLike === true ? "ios-heart-sharp" : "ios-heart-outline"} /> 图标。

请提出任何解决方案。

【问题讨论】：

标签： reactjs react-native

【解决方案1】：

您不应该更改传递的道具。您应该改为使用状态 - 可以在此处阅读更多内容：https://github.com/uberVU/react-guide/blob/master/props-vs-state.md。

例如，您可以将 prop 传递到 useState 并切换此值：

const Liker = ({ isUserLiked }) => {
  const [isLiked, setIsLiked] = useState(isUserLiked);

  const _onPressHeart = () => setIsLiked(!isLiked);

  return (
    <TouchableOpacity onPress={_onPressHeart}>
      <Ionicons
        name={isLiked ? 'ios-heart-sharp' : 'ios-heart-outline'}
        size={30}
      />
    </TouchableOpacity>
  );
};

您可以在此处找到完整的工作示例：https://snack.expo.dev/@tnr_c/liker

【讨论】：

这不是单一值。它应该是一个数组。所以我认为这是不可能的。
状态可以是任何类型。你能详细说明你的意思它应该是一个数组吗？
这个 'const [isUserLike, setIuserLike] = useState(props.isUserLike);'只在第一个数组的变量中设置真值。
这个数组中保存的其他数据是什么？
其他数据为：

【解决方案2】：

如果 isUserLike 已经是一个布尔值，那么就足够了：prop.yourBoolean 如果你想检查它的真值，否则：!prop.yourBoolean

第一： 组件不能更新自己的 props，除非它们是数组或对象（让组件更新自己的 props，即使可能是反模式），但可以更新其状态和子级的 props。

第二次： 您可以将其添加到子状态并在以下位置更新其值：

  const [isUserLike, setIsuserLike] = useState(props.isUserLike);

  const onPressHeart = () => {
    setIsuserLike(!isUserLike);
  };

<TouchableOpacity
         onPress={onPressHeart}>
         <Ionicons name={isUserLike ? "ios-heart-sharp" : "ios-heart-outline"} />
</TouchableOpacity>

演示： codesandbox.io/s/boring-mcclintock-vhj4c?file=/src/App.js

您可以在这里找到更多信息：https://es.reactjs.org/docs/state-and-lifecycle.html

【讨论】：

const onPressHeart = async () => { !props.isUserLike };但是我在 onPress 上做什么？
我已经编辑了答案，你必须在你的 onPressHeart 函数中将你的布尔值转换为相反的值
不改变
你是如何使用道具的，我需要更多信息
FeedMainStoryCard 是 Feed 屏幕的组件。导出默认函数 FeedMainStoryCard(props) {} 然后显示 props 值。