ajax - 使用 axios get React 时状态不更新

Question

我想使用来自 API 的数据进行选择输入。所以我使用 axios 从服务器接收数据并保存到状态。但是当我使用 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;

标签： ajaxreactjsaxios

Answer 1

解决我忘记在地图中添加（）

前 ：

 {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>
            );
          })}