如何在特定数组元素请求成功后将按钮文本从Send Request改为Pending

没问题，我来帮你搞定这个按钮状态的问题！你之前遇到的情况是因为没有给每个按钮单独维护状态，导致一修改state就影响了所有按钮。下面给你两种实用的解决方案，你可以根据自己的场景选择：

方案一：给数组元素添加独立状态字段 #

这种方式适合你可以修改数组结构的场景，给每个元素新增一个isPending字段来标记该按钮的状态：

1. 初始化状态 #

在组件的构造函数里，给原始数组的每个元素添加isPending初始值：

constructor(props) {
  super(props);
  // 假设你的原始数组是从props传入或者其他方式获取的
  const initialSet = yourOriginalArray.map(item => ({
    ...item,
    isPending: false // 初始状态都是未请求
  }));
  
  this.state = {
    set: initialSet
  };
}

2. 渲染列表与按钮 #

渲染时根据当前元素的isPending值显示对应文本，同时给按钮绑定点击事件：

{this.state.set.map((item) => (
  <div key={item.id}> {/* 一定要加唯一key，推荐用item.id */}
    {/* 渲染你的name、email等数据 */}
    <p>姓名：{item.name}</p>
    <p>邮箱：{item.email}</p>
    <Button 
      onPress={() => this.sendRequest(item.id)}
      disabled={item.isPending} {/* 可选：Pending时禁用按钮防止重复点击 */}
    >
      <Text>{item.isPending ? 'Pending' : 'Send Request'}</Text>
    </Button>
  </div>
))}

3. 更新对应按钮状态 #

在sendRequest函数中，请求成功后只修改对应ID元素的isPending状态：

sendRequest(UserID) {
  // 这里替换成你的实际请求逻辑
  fetch('你的接口地址', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ userId: UserID })
  })
  .then(res => res.json())
  .then(data => {
    if (data === true) {
      // 只更新对应ID的元素状态
      this.setState(prevState => ({
        set: prevState.set.map(item => 
          item.id === UserID ? { ...item, isPending: true } : item
        )
      }));
    }
  })
  .catch(err => console.error('请求失败:', err));
}

方案二：单独维护状态映射对象 #

如果你不想修改原始数组的结构，可以用一个对象来记录哪些ID处于Pending状态：

1. 初始化状态 #

constructor(props) {
  super(props);
  this.state = {
    set: yourOriginalArray, // 原始数组保持不变
    pendingIds: {} // 键是用户ID，值是是否Pending
  };
}

2. 渲染按钮 #

{this.state.set.map((item) => (
  <div key={item.id}>
    <p>姓名：{item.name}</p>
    <p>邮箱：{item.email}</p>
    <Button 
      onPress={() => this.sendRequest(item.id)}
      disabled={this.state.pendingIds[item.id]}
    >
      <Text>{this.state.pendingIds[item.id] ? 'Pending' : 'Send Request'}</Text>
    </Button>
  </div>
))}

3. 更新状态 #

sendRequest(UserID) {
  fetch('你的接口地址', { /* 请求配置 */ })
  .then(res => res.json())
  .then(data => {
    if (data === true) {
      this.setState(prevState => ({
        pendingIds: { ...prevState.pendingIds, [UserID]: true }
      }));
    }
  })
  .catch(err => console.error('请求失败:', err));
}

这两种方案都能实现点击哪个按钮就只更新哪个按钮的文本，不会影响其他按钮。推荐优先用方案二，因为它不需要改动原始数据的结构，更灵活。

内容的提问来源于stack exchange，提问作者user11587840