TypeError: _this2.props.value.forEach is not a function

Question

加载以下组件时出现以下错误：

TypeError: _this2.props.value.forEach is not a function
    fetchRecords webpack:///./src/main/js/components/forms/AutoCompanies.js?:122
    promise callback*fetchRecords webpack:///./src/main/js/components/forms/AutoCompanies.js?:115
    componentDidMount webpack:///./src/main/js/components/forms/AutoCompanies.js?:149
    React 6
    unstable_runWithPriority webpack:///./node_modules/scheduler/cjs/scheduler.development.js?:653
    React 5
    unstable_runWithPriority webpack:///./node_modules/scheduler/cjs/scheduler.development.js?:653
    React 6
AutoCompanies.js:143:24

而在下面的代码中，基本上就是表示这行代码 this.props.value.forEach(e => {。我想知道为什么会这样？

我通过遇到了这个 post 但无法在我的上下文中弄清楚它。

import { Select as CompanySelect } from "react-select-virtualized";

function escapeRegexCharacters(str) {
  return str.replace(/[.*+?^${}()|[\]\]/g, "\$&");
}

const override = css`
  display: block;
  margin: 0 auto;
  border-color: red;
`;

export class AutoCompanies extends Component {
  constructor(props) {
    super(props);
    this.state = {
      value: "",
      selectedCompanyValues: null,
      selectedCompanies: [],
      loading: false,
    };

    this.onChange = this.onChange.bind(this);
    this.companyTemplate = this.companyTemplate.bind(this);
    this.selectedCompaniesTemplate = this.selectedCompaniesTemplate.bind(this);
  }

  companyTemplate(option) {
    return (
      <div className="country-item">
        <div>{option.label}</div>
      </div>
    );
  }

  selectedCompaniesTemplate(option) {
    if (option) {
      return (
        <div className="country-item country-item-value">
          <div>{option.title}</div>
        </div>
      );
    }

    return "Select Companies";
  }

  onChange = (val) => {
    this.setState({
      value: val,
      selectedCompanyValues: val,
    });
    this.props.onChange(val);
  };

  fetchRecords() {
    const loggedInUser = JSON.parse(sessionStorage.getItem("loggedInUser"));
    let url = isAdmin(loggedInUser) ? "url1" : "url2?value=" + loggedInUser.id;

    return axios
      .get(url)
      .then((response) => {
        let selectedCompanies = [
          {
            title: "test",
            label: this.props.value[0] && this.props.value[0].title,
          },
        ];
        if (this.props.value) {
          this.props.value.forEach((e) => {
            selectedCompanies.push(
              response.data._embedded.companySets.filter((companySet) => {
                return companySet.companySetId === e.companySetId;
              })[0]
            );
          });
        }

        this.setState({
          selectedCompanies: response.data._embedded.companySets.map(
            (item) => ({
              label: item.title,
              title: item.title,
              companySetId: item.companySetId,
            })
          ),
          selectedCompanyValues: selectedCompanies,
        });
      })
      .catch((err) => console.log(err));
  }

  componentDidMount() {
    this.fetchRecords(0);
  }

  render() {
    return (
      <div>
        <CompanySelect
          value={this.state.selectedCompanyValues}
          options={this.state.selectedCompanies}
          onChange={this.onChange}
          optionHeight={60}
        />
      </div>
    );
  }
}

编辑：

添加了更多信息：

所以我在我的代码super(props)下面添加了以下语句

 console.log("Props Testing");
        console.log(props);

它打印成这样：

Object { fieldName: "companySets", value: 32714, onChange: onChange(ev)
 }

fieldName: "companySets"

onChange: function onChange(ev)

value: 32714

<prototype>: Object { … }

有时，它以数组的形式出现：

 Object { fieldName: "companySets", value: (1) […], onChange: onChange(ev)
 }

fieldName: "companySets"

onChange: function onChange(ev)
value: Array [ {…} ]

0: Object { companySetId: 32798, sourceSystem: "12", status: "CONSENTED", … }

length: 1

<prototype>: Array []

<prototype>: Object { … }

Answer 1

如上所示，value 的类型是数字 (32714)。我不知道您要在代码中准确地完成什么，但是修复错误的解决方法是在 if 语句中包含以下内容：

编辑：当 value 类型是数字或数组时，您希望能够运行两者的代码，您可以这样做：

if (typeof this.props.value === 'number') {
    // Enter your code to run when this.props.value is a number
} else if (Array.isArray(this.props.value)) {
    // Enter your code to run when this.props.value is an array
}

而不是

if (this.props.value)

TypeError: _this2.props.value.forEach is not a function

TypeError: _this2.props.value.forEach is not a function

reactjs

react-state