Question

我需要您寻找错误代码。我知道这是错误的。

import React, { Component } from "react";
import { options1, options2, questions } from "./data";
import Select from "react-select";

class Esensial extends Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedOption: [],
      selectedOption2: []
    };
  }

  handleChange1 = selectedOption => {
   this.setState({ selectedOption, selectedOption2: null });
  };

  handleChange2 = selectedOption => {
   this.setState({ selectedOption2: selectedOption });
  };
filteredOptions() {
    return options2.filter(o => o.link === 
this.state.selectedOption.value);
  }
  questionsOptions() {
    return questions.filter(
      question => question.link === this.state.selectedOption2.value
    );
  }
  render() {
    const filteredOptions = this.filteredOptions();
    const questionsOptions = this.questionsOptions();

    return (
      <div>
        <h1>UKM Esensial</h1>

        <div className="form-group">
          <label>Pilih Jenis Upaya Pelayanan Kesehatan</label>
          <Select
            className="form-control"
            isClearable={false}
            onChange={this.handleChange1}
            options={options1}
            value={this.state.selectedOption}
          />
        </div>
        <div className="form-group">
          <label>Pilih Variable</label>
          <Select
            className="form-control"
            isClearable
            onChange={this.handleChange2}
            options={filteredOptions}
            value={this.state.selectedOption2}
          />
        </div>
        <div>
          <table className="table table-striped">
            <thead>
              <tr>
                <th>Sub-Variabel</th>
                <th>Sasaran</th>
                <th>Capaian</th>
              </tr>
            </thead>
            <tbody>
              {questionsOptions.map(q => (
                <tr>
                  <td>{q}</td>
                  <td>
                    <input type="number" />
                  </td>
                  <td>
                    <input type="number" />
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    );
  }
}
export default Esensial;

代码将运行，当selectedOption得到一个值时，它会过滤（）options2，当selectedOption2得到一个值时，它会过滤（）questionsOptions，但是我不知道代码仍然崩溃..请帮帮我。。地图错了吗？可能是因为我不使用componentDidUpdate（）{}。当我使用componentDidUpdate（）时，它会自行执行。也许我使用firebaseauth（）来验证登录系统。

Answer 1

这是由于this.state.selectedOption2.value所致，因为您要在selectedOption2 null中设置handleChange1的值。以下是解决方案：

questionsOptions() {
  const {selectedOption2} = this.state;
return questions.filter(
  question => question.link === selectedOption2 && selectedOption2.value || ''
);
}

从您的初始状态开始，我假设selectedOption2是数组，因此您无法访问值selectedOption2.value，而必须按索引访问，例如selectedOption2[0].value（假设所需索引中为0）< / p>

Answer 2

您的状态有些混乱，因为您已将它们初始化为数组，但是您希望将它们作为对象进行访问。错误消息表明 selectedOption2 不拥有任何名为 value 的属性。

答案很大程度上取决于实现 onChange 方法时期望得到的结果。

我不知道您的确切数据结构，但是如果您使用数组，则过滤器功能应类似于以下内容：

questionsOptions() {
   return questions.filter(
      question => {
         this.state.selectedOption2.map(option => {
            return question === option.value;
         });
      }
   );
}

在上述示例中，我假设 selectedOption2 是对象数组，因此应使用 map 函数来查找所需的相应值。

顺便说一句，如果它是一个简单的值-即它是一个字符串，整数等-，那么您应该在示例的比较右侧保留 value 属性。

questionsOptions() {
   return questions.filter(
      question => question === this.state.selectedOption2
   );
}

相反，如果它是具有简单值的数组，则：

questionsOptions() {
   return questions.filter(
      question => {
         this.state.selectedOption2.map(option => {
            return question === option;
         });
      }
   );
}

我还建议研究您的数据结构，并考虑如何初始化状态字段，因为这很容易引起误解，并给读者和您造成障碍。

触发状态“ selectedOptions2”时如何映射（）

2 个答案: