Question

我有一个包含许多元素的数组，并且我正在其组件中使用其数据，例如名称，电子邮件等。它还具有一个发送请求的按钮，因此当用户单击send时请求如果响应返回true，我想将按钮的文本从“发送”更改为“待处理”

我尝试在响应后使用状态，但是它将文本更改为所有元素。我只想对单击的元素进行更改。

{this.state.set.map((item, index) => {
return (
{..data}
<Button onPress={() => this.sendRequest(this.state.set[index].id)}>
<Text>Send Request</Text>
</Button>)})}

  sendRequest(UserID) {
        {fetch requests...}
            .then((data) => {
                if (data == true) {
{Change text to Pending}
                }})    }

对服务的响应为真之后，我想将按钮的文本更改为单击该按钮的特定索引的待处理状态。

Answer 1

您只需要为数组中的每个项目在文本上有一个条件渲染实例。

首先，您需要在数组的每个项目中添加一个待处理变量，以便您知道需要更改的变量。为此，请执行以下操作：

var pending=this.state.set.map(item=>{
    let obj=item
    obj.pending=false
    return obj
})
this.setState({set: pending})

您需要在代码中的某个位置（例如在componentDidMount中）运行此功能。

然后，您需要根据索引将pending键更改为true。在您的情况下，它将变成：

 sendRequest(UserID, index) {              //remember to pass the index
  {fetch requests...}
      .then((data) => {
          if (data == true) {
              let arr=this.state.set
              arr[index].pending=true
              this.setState({ set: arr })
          }
        })    
      }

然后，文本部分将变为：

<Text>{item.pending? "Pending..." : "Send Request" }</Text>

如果您需要将挂起状态更改为false，则只需：

toggleOff(index){      //remember to .bind() it
    let arr=this.state.set
    arr[index].pending=false
    this.setState({ set: arr })
}

Answer 2

只是一个想法：

...
state = {
buttons: [],
...
}


{this.state.set.map((item, index) => {
return (
{..data}
<Button onPress={() => this.sendRequest(item.id, index)}>
<Text>{this.state.buttons[index] ? 'Pending...' : 'Send Request'}</Text>
</Button>)})}

  sendRequest(UserID) {
        {fetch requests...}
            .then((data) => {
                if (data == true) {
                  const { buttons } = this.state;
                  buttons[index]= UserID;

                  // update state
                  this.setState({ buttons });
                }})
    }

从特定数组元素发送请求后，如何将文本“发送请求”更改为“待处理”？

2 个答案: