Reactjs 单选按钮未根据React中选择选项的更改正确更新

我有一个带有2个选项的选择下拉列表和一个带有2个值的单选按钮。（参考下面的代码）加载页面时，“象限1”是默认选择选项，默认情况下不会选择任何单选按钮

对于选择选项的“象限1”，我将在单选按钮中选择“否”。对于选择选项的“象限2”，我将选择“是”。这些值相应地存储在“网格”状态。无论何时进行更改，我都能够成功捕获状态中的这些更新

但当我在选择选项之间切换时，单选按钮不会相应更改。我知道每当选择选项被更改时，我必须更新单选按钮的“checked”属性。但我无法做到这一点。如果我错了，请原谅，因为我在过去的一周里都是新来的

请帮助我在“选择”选项更改时更新单选按钮

Updated RuleScreen.js:

[Correct Grid State details but radio button not updated][1]
import React, { Component } from "react";
import M from "materialize-css";
import dropDownList from "./dropDown";
import _ from "lodash";

class RuleScreen extends Component {

  constructor(props){
    super(props);
    this.state = {
      quad: "Q1",
      grid: [{id:"Q1", optin:"",NL:""}, {id:"Q2", optin:"", NL:""}]
    };
  }

  componentDidMount() {
    var elems = document.querySelectorAll('select');
    M.FormSelect.init(elems, {hover: true, coverTrigger: false});
  }

  quadChange = async (e) => {
    await this.setState({ quad:e.target.value});
  }

  optinChange = async (e) => {
    const currQuad = this.state.quad;
    const value = e.target.value;
    await this.setState(prevState => ({
      grid: prevState.grid.map(
        item => item.id === currQuad? { ...item, optin: value}: item
      )
    }))
  }

  render() {
    const selectedGrid = this.state.grid.filter(quad=>quad.id === this.state.quad)
    return (
      <div>
        <h3>Rule Setup</h3>
        <div className="container">
          <div className="btn">
            <select required value={this.state.quad} onChange={this.quadChange}>
              <option key="Q1" value="Q1">Quadrant 1</option>
              <option key="Q2" value="Q2">Quadrant 2</option>
            </select>
          </div>
          <form>
            <label>Opt In</label>
            <label><input id="yes" checked={selectedGrid[0].optin=== 'yes' } onChange={this.optinChange} value="yes" className="with-gap" name="optin" type="radio"/>
                <span>Yes</span>
            </label>
            <label><input id="no" checked={selectedGrid[0].optin=== 'no' } onChange={this.optinChange} value="no" className="with-gap" name="optin" type="radio"/>
                <span>No</span>
            </label>
          </form>
        </div>
      </div>
    );
  }
}


export default RuleScreen;

更新的RuleScreen.js:
[正确的电网状态详细信息，但单选按钮未更新][1]
从“React”导入React，{Component}；
从“物化css”导入M；
从“/dropDown”导入dropDownList；
从“洛达斯”进口；
类RuleScreen扩展组件{
建造师（道具）{
超级（道具）；
此.state={
四方：“Q1”，
网格：[{id:“Q1”，选项：，NL:}，{id:“Q2”，选项：，NL:}]
};
}
componentDidMount（）{
var elems=document.querySelectorAll（'select'）；
init（元素，{hover:true，coverTrigger:false}）；
}
quadChange=异步（e）=>{
等待这个.setState（{quad:e.target.value}）；
}
optinChange=async（e）=>{
const currQuad=this.state.quad；
常量值=e.target.value；
等待此消息。设置状态（prevState=>({
网格：prevState.grid.map(
item=>item.id==currQuad？{…item，optin:value}:item
)
}))
}
render（）{
const selectedGrid=this.state.grid.filter（quad=>quad.id==this.state.quad）
返回(
规则设置
象限1
象限2
选择加入
对
不
);
}
}
导出默认规则屏幕；

因为您使用数组函数，所以不必将函数绑定到“this”。 我还没有测试代码，但想法就在这里。 “将值添加到”单选按钮，删除值的getter，在“渲染”中向网格添加选择器

class RuleScreen extends Component {

      constructor(props){
        super(props);
        this.state = {
          quad: "Q1",
          grid: [{id:"Q1", optin:"", NL:""}, {id:"Q2", optin:"", NL:""}]
        };
      }

      componentDidMount() {
        var elems = document.querySelectorAll('select');
        M.FormSelect.init(elems, {hover: true, coverTrigger: false});
      }

      quadChange = (e) => {
        this.setState({ quad:e.target.value});
      }

      optinChange = (e) => {
        const currQuad = this.state.quad;
        const value = e.target.value;
        this.setState(prevState => ({
          grid: prevState.grid.map(
            item => item.id === currQuad? { ...item, optin: value}: item
          )
        }))
      }
      

      render() {
        const selectedGrid = this.state.grid.filter(quad=>quad.id === this.state.quad) //maybe with [0] at the end
        return (
          <div>
            <h3>App Name</h3>
            <div className="container">
              <div className="btn">
                <select required value={this.state.quad} onChange={this.quadChange}>
                 <option key="Q1" value="Q1">Quadrant 1</option>
                 <option key="Q2" value="Q2">Quadrant 2</option>
                </select>
              </div>
              <form>
                <div>Opt In</div>
                <label>
                  <input id="yes" checked={selectedGrid.optin === 'yes'} onChange={this.optinChange} value="yes" className="with-gap" name="optin" type="radio"/>
                    <span>Yes</span>
                </label>
                <label>
                  <input id="no" checked={selectedGrid.optin === 'no'} onChange={this.optinChange} value="no" className="with-gap" name="optin" type="radio"/>
                    <span>No</span>
                </label>
              </form>
          </div>
        )
      }
}


export default RuleScreen;

类规则屏幕扩展组件{
建造师（道具）{
超级（道具）；
此.state={
四方：“Q1”，
网格：[{id:“Q1”，选项：，NL:}，{id:“Q2”，选项：，NL:}]
};
}
componentDidMount（）{
var elems=document.querySelectorAll（'select'）；
init（元素，{hover:true，coverTrigger:false}）；
}
quadChange=（e）=>{
this.setState（{quad:e.target.value}）；
}
选项更改=（e）=>{
const currQuad=this.state.quad；
常量值=e.target.value；
this.setState（prevState=>({
网格：prevState.grid.map(
item=>item.id==currQuad？{…item，optin:value}:item
)
}))
}
render（）{
const selectedGrid=this.state.grid.filter（quad=>quad.id==this.state.quad）//结尾可能是[0]
返回(
应用程序名称
象限1
象限2
选择加入
对
不
)
}
}
导出默认规则屏幕；

我已按所述更新了代码（请参阅问题块中的代码）。但现在我无法“检查”任何单选按钮。但是，optinChange功能可以正常工作，并且状态更新时不会出现任何问题。但是单选按钮看起来没有被选中。我不确定我做错了什么。非常感谢。在selectedGrid checked={selectedGrid[0]。optin===“yes”}中添加[0]后，问题得到解决。是的，就是这样，因为Array.filter返回数组。您可以在此处执行此操作：const selectedGrid=this.state.grid.filter（quad=>quad.id==this.state.quad）[0]