Question

import React, { Component } from "react";

class LogIssueScreen extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  componentDidMount() {
    fetch(`${apiRoot}log_issue`, {
      method: "GET",
    })
      .then(response => response.json())
      .then(data => {
        this.setState({
          fields: data.fields
        });
      });
  }

  render() {
    return (
      <div className="container-fluid">
        {this.state.fields ? (
          <div className="row">
            <div className="col col-md-6 my-3 mx-auto">
              this.state.fields.filter(x => (x.choices != null)).map((item,
              index) => (
              <div className="row align-items-center">
                <div className="col-3">{item.name}</div>
                <div className="col my-3 mx-auto">
                  <Dropdown
                    value={item.name}
                    choices={item.choices}
                    id={item.name}
                  />
                </div>
              </div>
              ))
            </div>
          </div>
        ) : (
          "LOADING"
        )}

        <div className="row">
          <div className="col-2 my-3 mx-auto">
            <input
              type="button"
              value="Log Issue"
              className="btn btn-block btn-primary"
              onClick={this.onSubmit}
            />
          </div>
        </div>
      </div>
    );
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

我正在使用以下代码：

{
  this.state.fields
    ? this.state.fields
        .filter(x => x.choices != null)
        .map((item, index) => (
          <Dropdown
            value={item.name}
            choices={item.choices}
            id={item.name}
            onSelect={this.handleDropdownSelect}
          />
        ))
    : "LOADING";
}

其结果是'item' is not defined no-undef的三个副本。

目标是使（对象的）“字段”数组处于状态，对其进行过滤，以便仅保留“选择”键不为null的那些元素，然后将结果数组映射到一系列下拉列表。我尝试用字符串替换{item.foo}，以确认Dropdown组件没有问题，并且确实可以正常工作。由于某种原因，地图找不到“项目”。我还尝试过删除键（即只是项，而不是item.foo），以检查是否给出了不同的错误，但是没有。

Answer 1

您是JSX中缺少的一对卷曲对（{}），您在此处开始编写filter方法。如果要在JSX中使用Javascript表达式，则应再次使用curlies（{}）。

  render() {
    return (
      <div className="container-fluid">
        {this.state.fields ? (
          <div className="row">
            <div className="col col-md-6 my-3 mx-auto">
              // here, curlies again
              {this.state.fields
                .filter(x => x.choices != null)
                .map((item, index) => (
                  <div className="row align-items-center">
                    <div className="col-3">{item.name}</div>
                    <div className="col my-3 mx-auto">
                      <Dropdown
                        value={item.name}
                        choices={item.choices}
                        id={item.name}
                      />
                    </div>
                  </div>
                ))}
            </div>
          </div>
        ) : (
          "LOADING"
        )}

        <div className="row">
          <div className="col-2 my-3 mx-auto">
            <input
              type="button"
              value="Log Issue"
              className="btn btn-block btn-primary"
              onClick={this.onSubmit}
            />
          </div>
        </div>
      </div>
    );
  }

模仿版本：

const remoteData = {
  fields: [
    { id: "1", name: "foo", choices: ["a"] },
    { id: "2", name: "bar", choices: ["b"] },
    { id: "3", name: "baz", choices: ["c"] },
  ],
};

const fakeRequest = () =>
  new Promise(resolve => setTimeout(() => resolve(remoteData)));

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  componentDidMount() {
    fakeRequest().then((data) => {
      this.setState({
        fields: data.fields,
      });
    });
  }

  render() {
    return (
      <div className="container-fluid">
        {this.state.fields ? (
          <div className="row">
            <div className="col col-md-6 my-3 mx-auto">
              {this.state.fields
                .filter(x => x.choices != null)
                .map(item => (
                  <div className="row align-items-center" key={item.id}>
                    <div className="col-3">{item.name}</div>
                    <div className="col my-3 mx-auto">
                      <Dropdown
                        value={item.name}
                        choices={item.choices}
                        id={item.name}
                      />
                    </div>
                  </div>
                ))}
            </div>
          </div>
        ) : (
          "LOADING"
        )}

        <div className="row">
          <div className="col-2 my-3 mx-auto">
            <input
              type="button"
              value="Log Issue"
              className="btn btn-block btn-primary"
              onClick={this.onSubmit}
            />
          </div>
        </div>
      </div>
    );
  }
}

const Dropdown = ({ name, id }) => (
  <div>
    <p>{name}</p>
    <p>{id}</p>
  </div>
);

ReactDOM.render(
  <App />,
  document.getElementById("root")
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

React / Javascript在array.map中找不到元素

1 个答案: