Question

你好我试图基于我在状态中使用map的数组来渲染选项但是在返回时使用它时我得到了未定义

这是数组

this.state = {   countries: ["Australia","Brazil","China","Sweden"]}

我尝试使用它

this.state.countries.map((country, i) =>
    <option value={this.state.countries[i]}>{this.state.countries[i]}</option>)

但我得到i is undefined。我也尝试只使用国家但总是未定义。但如果我在我的渲染中做这样的话

this.state.countries.map((country, i) => console.log(country + " " + i));

我认为这个国家和我都是正确的。为什么我不能在回报中使用这些值？

这是整个组件

    class BoxForm extends Component {
  constructor(props) {
    super(props);
    this.state = {
      name: "",
      weight: "",
      color: "",
      country: "",
      countries: ["Australia","Brazil","China","Sweden"]
    }
    this.handleNameChange = this.handleNameChange.bind(this);
    this.handleWeightChange = this.handleWeightChange.bind(this);

  }
   handleNameChange(e) {
    this.setState({ name: e.target.value });
  }
  handleWeightChange(e) {
    this.setState({ weight: e.target.value });
  }

  render() {
    this.state.countries.map((country, i) => console.log(country + " " + i));
    return (
      <div className="formGroup">
       <form>
        <FormGroup>
        <h4 className="nameHeader">Name</h4>
          <FormControl
            className="textfield"
            type="text"
            value={this.state.name}
            placeholder="Enter text"
            onChange={this.handleNameChange}
          />
           <h4 className="weightHeader">Weight</h4>
          <FormControl
            className="textfield"
            type="number"
            value={this.state.weight}
            placeholder="Enter text"
            onChange={this.handleWeightChange}
          />
           <h4 className="colorHeader">Box Color</h4>
          <FormControl
            className="textfield"
            type="text"
            value={this.state.color}
            placeholder="Enter text"
          />
           <h4 className="destinationHeader">Destination Country</h4>
          <FormControl
            componentClass="select"
            className="textfield"
            type="dropdown"
            value={this.state.country}
            placeholder="Enter text"
          >
         this.state.countries.map((country, i) =>
  <option value={this.state.countries[i]}>{this.state.countries[i]}</option>)
        </FormControl>
        </FormGroup>
      </form>
      </div>
    );
  }
}

export default BoxForm;

Answer 1

您需要使用function changeDay(){ $.get('/planing/change-day', {new_curent_day: $('.owl-item.center .slide_day').text()}, function (data) { console.log(data); }); } function getDay(){ $.get('/planing/get-day', function (data) { console.log(data); }) }

包装从map数组返回的内容

{}

Answer 2

请检查创建的工作选择选项组件:)。

https://codesandbox.io/s/xjpw5wq65w

import React, { Component } from "react";

class SelectOptionComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: "",
      countries: ["Australia", "Brazil", "China", "Sweden"]
    };
  }

  handleChange = e => {
    const { value } = e.target;
    this.setState({
      value: value
    });

    console.log("Selected Item", value);
  };

  renderData() {
    return this.state.countries.map((item, index) => {
      return (
        <option value={item} key={index}>
          {item}
        </option>
      );
    });
  }

  render() {
    return (
      <select value={this.state.value} onChange={this.handleChange}>
        {this.renderData()}
      </select>
    );
  }
}

export default SelectOptionComponent;

state.map（state，i）给出undefined

2 个答案: