使用蓝图框架和道具从文件获取映射到数组

Question

我想我会通过学习诸如Blueprint之类的框架来挑战自己。我正在使用他们的文档并修改他们的道具。我决定使其更具挑战性，并从JSON文件中获取一个。提取工作正常，但是现在我想根据数组中有多少索引来动态制作一些单选框。我想知道是否有人可以给我一些指导以及我该怎么做。另外，请告知我是否执行正确的方法。

这是我收到的错误：TypeError：“未定义this.state.sushiData.Sashimi”

我确保在我的构造函数中定义了“ sushiData”，并且我绝对没有拼错任何东西。

这是我收到的错误：TypeError：“未定义this.state.sushiData.Sashimi”

我确保在我的构造函数中定义了“ sushiData”，并且我绝对没有拼错任何东西。

<div id="app"></div>
<script type="text/babel">
  class SushiPage extends React.Component {
    constructor(props) {
      super(props);
      this.state = { sushiData: [], radioIndex: 0, isLoading: true };
    }
    handleSushiChange = e => {
      this.setState({ radioIndex: e.target.value });
    };
    componentDidMount() {
      fetch("sushi.json")
        .then(response => response.json())
        .then(data => this.setState({ sushiData: data, isLoading: false }));
    }

    render() {
      const {} = this.state;
      const { Button, Navbar, Card, RadioGroup, Radio } = Blueprint.Core;

      return (
        <>
          <Navbar class="bp3-navbar bp3-dark">
            <Navbar.Group>
              <Navbar.Heading>Order Your Sushi Online</Navbar.Heading>
              <Navbar.Divider />
              <Button icon="home" text="Home" />
              <Button icon="phone" text="Contact Us" />
            </Navbar.Group>
          </Navbar>

          <Card interactive={true}>
            <h1>Choose The Type Of Sushi</h1>
            <RadioGroup
              inline={true}
              label="Select the Sushi Type"
              onChange={this.handleSushiChange}
              selectedValue={this.state.sushiType}
            >
              <Radio
                large={true}
                label="Sashimi"
                value="one"
                onChange={this.handleSashiChange}
              />
              <Radio
                large={true}
                label="Sushi"
                value="two"
                onChange={this.handleSushiChange}
              />

              <Radio
                large={true}
                label="Nigiri"
                value="three"
                onChange={this.handleNigriChange}
              />
            </RadioGroup>
          </Card>

          <Card interactive={true}>
            <h5>sushi</h5>
            <div>
              {this.state.sushiData.Sashimi.map((sashimiObj, i) => {
                return (
                  <>
                    <input
                      key={"radio_" + i}
                      id={"sashimi_" + i}
                      type="radio"
                      name="sashimiName"
                      checked={radioIndex == i}
                      value={i}
                      onChange={this.handleSushiChange}
                    />
                    <label key={"label_" + i} htmlFor={"sashimi_" + i}>
                      {sashimiObj.name}
                    </label>
                  </>
                ); //match return of the if inside map
              })}
            </div>
          </Card>
          <Card interactive={true}>
            <h5>
              <a href="#">Card heading</a>
            </h5>
            <p>Card content</p>
            <Button>Submit</Button>
          </Card>
        </>
      );
    }
  }

  ReactDOM.render(<SushiPage />, document.querySelector("#app"));
</script>

    

我想让它根据我的JSON文件动态加载一些单选框。