Question

我有三个RadioButton（男，女，其他），我正在从服务器获取数据。

我想要的是当this.state.genderType == 'Male'然后自动选择Male RadioButton时。

当this.state.genderType == 'Female'时，应选择Female RadioButton，依此类推。这是我的状态：

  SetStatefunction = () =>{
    const {retrievedata}  = this.state
      retrievedata.map((item)=>{
       this.setState({name: item.name})
        this.setState({dob: item.dob})
         this.setState({bloodgroup: item.bloodGroup})
          this.setState({email: item.email})
           this.setState({genderType: item.gender})
          this.setState({phone: item.mobile})
         this.setState({address: item.address})
        console.log(this.state.genderType)
      if(item.dob){
     let dob =  moment(item.dob).format("YYYY-MM-DD")
    this.setState({dob: dob})
   }
  })
 }

这是我的RadioButtons的代码

<RadioGroup
  size={18}
  thickness={2}
  color="#58992c"
  style={{ flexDirection: "row" }}
  onSelect={(index, value) => {
    this.setState({ genderType: value });
  }}
>

  <RadioButton
    value={"Male"}
    style={{ alignItems: "center"}}
    name = "gender"
  >
    <Text style={{fontSize: 16}}>Male</Text>
  </RadioButton>

  <RadioButton
    value={"Female"}
    style={{ alignItems: "center" }}
    name = "gender"
  >
    <Text style={{fontSize: 16}}>Female</Text>
  </RadioButton>

  <RadioButton
    value={"Other"}
    style={{ alignItems: "center" }}
    name = "gender"
  >
    <Text style={{fontSize: 16}}>Other</Text>
  </RadioButton>

</RadioGroup>

Answer 1

您可以将checked属性添加到RadioButton，

<RadioGroup
  size={18}
  thickness={2}
  color="#58992c"
  style={{ flexDirection: "row" }}
  onSelect={(index, value) => {
    this.setState({ genderType: value });
  }}
>

  <RadioButton
    value={"Male"}
    style={{ alignItems: "center"}}
    name = "gender"
    checked = {data.gender === "Male"}
  >
    <Text style={{fontSize: 16}}>Male</Text>
  </RadioButton>

  <RadioButton
    value={"Female"}
    style={{ alignItems: "center" }}
    name = "gender"
    checked = {data.gender === "Female"}
  >
    <Text style={{fontSize: 16}}>Female</Text>
  </RadioButton>

  <RadioButton
    value={"Other"}
    style={{ alignItems: "center" }}
    name = "gender"
    checked = {data.gender !== "Male" && data.gender !== "Female"}
  >
    <Text style={{fontSize: 16}}>Other</Text>
  </RadioButton>

</RadioGroup>

更新

此功能有问题，

SetStatefunction = () => {
    const { retrievedata } = this.state
    retrievedata.map((item) => {
        this.setState({ name: item.name })
        this.setState({ dob: item.dob })
        this.setState({ bloodgroup: item.bloodGroup })
        this.setState({ email: item.email })
        this.setState({ genderType: item.gender })
        this.setState({ phone: item.mobile })
        this.setState({ address: item.address })
        console.log(this.state.genderType)
        if (item.dob) {
            let dob = moment(item.dob).format("YYYY-MM-DD")
            this.setState({ dob: dob })
        }
    })
}

如果您在retrievedata中有数据，那么为什么要再次对其进行迭代？

您正在迭代retrievedata，对于每次迭代，您都在调用多个setState，这是完全错误的。

setState是async。您不应该在setState中调用map，这只会造成冲突，并且永远不会获得期望的输出。

您可以直接使用retrievedata数组获取值，

checked = {retrievedata[0].gender.toLowerCase() === "male"}

根据动态值选择RadioButton

1 个答案: