Отображение массива из выборки файла с использованием каркаса и реквизита - PullRequest
Новая
       12

Отображение массива из выборки файла с использованием каркаса и реквизита

0 голосов
/ 12 апреля 2019

Я подумал, что буду испытывать себя на изучении некоторых фреймворков, таких как Blueprint. Я использовал их документацию и адаптировал их реквизит. Я решил сделать его более сложным и извлечь из файла JSON. Выборка работает, но теперь я хочу динамически создать несколько радиоблоков, основываясь на моем количестве индексов в массиве. Мне было интересно, если кто-то может дать мне некоторые рекомендации и что я могу сделать. Также, пожалуйста, дайте мне знать, если я делаю это правильно.

это ошибка, которую я получаю: Ошибка типа: "this.state.sushiData.Sashimi не определена"

Я убедился, что в моем конструкторе определено «sushiData», и я определенно ничего не написал.

это ошибка, которую я получаю: Ошибка типа: "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.

...