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

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。

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

标签： javascriptarraysreactjs

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>