在反应式原生中，如何用javascript从上百个相同的元素中选择特定的元素，比如 "getElementById()"？

Question

我有一个类似下面的屏幕。

如你所见，这是显示用户的帖子。有几百个帖子。目前，我正在为likeunlike系统而烦恼。我有一个API来发送数据并在数据库中执行likeunlike。问题是我如何更新这里的likeunlike状态？

假设，一个帖子里有2个爱。有人在上面按了爱。API请求发送到数据库，他成功地爱了它。但是由于屏幕上显示的是 "不喜欢 "的情况（比如说是灰色的），我怎么能把这个图标更新为 "喜欢 "的情况（比如说现在应该是红色的）。

所以，我想知道在react native中，是否有什么方法可以从许多元素中选择一个特定的元素。我用javascript编写了网页版的程序，为每个图标设置了唯一的id，并使用 "getElementById() "方法来更新某个特定的图标。

我是新手，所以请原谅我的问题和思路。如果你认为你有更好的想法，可以告诉我不同的方法来实现我想要的东西。

谢谢

Answer 1

如果我理解正确的话，请尝试 不 以抓取一个HTML元素的id来思考。每个心脏都是一个单独的组件，即一个函数或类，因此将是独立的JavaScript对象。

在React官方网站上，有一个很好的资源可以帮助理解和思考组件的概念。这里

因此，每张卡可能有

<Card>
   <Header>...with User avatar, name, posted time</Header>
   <Comment>foo bar....</Comment>
   <Heart /> // This render of heart will be a separate object to the next 
           // Render of heart on another card
</Card>

Essential然后在渲染 "Heart "组件时，你可以设置它的状态，然后在按下时改变状态。

//Using hooks
 const [isLiked, setIsLiked] = useState(false);

// On mount call api if post is liked setIsLike(true)


function onPressOfHeart() {
    // any Api calls
    setIsLiked(!isLiked); // Update heart to be true
}

return (
    <View>
        <Image> source={isLiked ? colorPinkUrl : colorGreyUrl}  </Image>
    </View>
)

如果你不使用钩子，你可以从父类中把道具truefalse传递给heart组件。

** 编辑以反映您的小吃。

我的零食

通过道具 被喜欢 这意味着父组件的任何状态变化都会在子组件上刷新。我写了一个简化的版本来向你展示组件如何单独维护自己的状态引用。

App.js

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [
        { isLiked: true, id: 12843 },
        { isLiked: false, id: 1267 },
        { isLiked: true, id: 154523 },
        { isLiked: false, id: 1256453 },
        { isLiked: false, id: 123454 },
      ],
      isPress: false,
    };
  }

  heartOnPress = (id) => {
    // This  OnPress would trigger your api call to Add/REmove like from user ?
    // But for this example will directly manipulate state
    this.setState((state) => {
      const data = state.data.map((el) => {
        if(el.id === id) {
          el.isLiked = !el.isLiked;
        }
        return el;
      });
      const isPress = !state.isPress
      return { data, isPress };
    });
  };

  renderListItem = ({ item }) => {
    return (
      <View style={styles.card}>
        <Text style={{ paddingRight: 10 }}>Press Me =></Text>
        <Heart isLiked={item.isLiked} id={item.id} onPress={this.heartOnPress} />
      </View>
    );
  };

  render() {
    return (
      <View style={styles.container}>
        <FlatList
          style={{ width: '100%' }}
          data={this.state.data}
          keyExtractor={(item) => item.id}
          renderItem={this.renderListItem}
        />
      </View>
    );
  }
}

Heart.js

const Heart = ({ isLiked, onPress, id }) => {
  return (
    <View>
      {isLiked ? (
        <TouchableOpacity onPress={() => onPress(id)}>
          <Icon name="heart" size={30} color="red" />
        </TouchableOpacity>
      ) : (
        <TouchableOpacity onPress={() => onPress(id)}>
          <Icon name="heart" size={30} color="grey" />
        </TouchableOpacity>
      )}
    </View>
  );
};