Состояние не обновляется при использовании ax ios get React - PullRequest
Новая
       4

Состояние не обновляется при использовании ax ios get React

0 голосов
/ 31 марта 2020

Я хочу сделать выбор ввода с данными из API. поэтому я использую топор ios для получения данных с сервера и сохранения в состояние. Но когда я использую this.setState, состояние не обновляется. и я не могу использовать его в методе рендеринга. не могли бы вы помочь мне в моей проблеме 

        import React from "react";
import axios from "axios";
import AddCFRulesCss from "../css/addclub.module.css";
import Container from "react-bootstrap/Container";
import Form from "react-bootstrap/Form";

class AddCFRules extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      dataMusim: [],
      musim: ""
    };
  }

  componentDidMount() {
      axios.get('http://localhost:80/skripsi2/getallseason.php')
      .then(res => {
          const response = res.data;
          this.setState({ dataMusim: response });
      })
      .catch(error => console.log(error))
  }

  render() {
    return (
      <Container fluid="xs" className={AddCFRulesCss.container}>
        <Form className={AddCFRulesCss.form}>
          <p className={AddCFRulesCss.form__title}>tambah aturan CF</p>
          <Form.Group>
            <Form.Label>Pilih Musim</Form.Label>
            <Form.Control as="select" name="musim" required>
              {this.state.dataMusim.map(musim => {
                return (
                  <option key={musim.id} value={musim.nama}>
                    {musim.nama}
                  </option>
                );
              })}
            </Form.Control>
          </Form.Group>
          <button type="submit" className={AddCFRulesCss.form__button}>
            tambah aturan CF
          </button>
        </Form>
      </Container>
    );
  }
}

export default AddCFRules;

1 Ответ

0 голосов
/ 31 марта 2020

Решить я забыл добавить () в карту

до: 

 {this.state.dataMusim.map(musim => {
            return (
              <option key={musim.id} value={musim.nama}>
                {musim.nama}
              </option>
            );
          })}

после: 

{this.state.dataMusim.map((musim) => {
            return (
              <option value={musim.musim} key={musim.id}>{musim.musim}</option>
            );
          })}
...