Question

我正在创建一个反应应用程序，如果单击症状按钮，我想在其中输出可能的疾病。

state = {
  user_symptoms = [],
  user_possible_disease = []
}

Disease = {
    'aids': ['fever', 'cough', 'dysentery'],
    'corona': ['fever', 'cough', 'breathe_problem'],
    'heart_attack': ['angina', 'pain', 'head_ache'],
    [A bunch of objects like this]
}

render() {
  return(
    <div>
      <p>{{this.state.user_possible_disease.map((key, index) => {
        return <h2 key={index}>{Object.keys(key)}</h2>
      })}}</p>
      <button value='cough' className='unclicked' />
      <button value='angina' className='unclicked' />
      <button value='pain' className='unclicked' />
      <button value='breathe_problem' className='unclicked' />
    </div>
  )
}

因此，如果我单击症状的任何按钮，则具有任何这些症状的可能的疾病对象将添加到user_possible_dissease中假设我单击了cough按钮，因此user_possible_disease: [{'aids': ['fever', 'cough', 'dysentery'], 'corona': ['fever', 'cough', 'breathe_problem'],}]将会是这样，如果我取消单击该按钮，可能的疾病就会从状态中消失。

Answer 1

我想您想针对给定的症状显示疾病。您可以执行以下操作：

class App extends React.Component {
  state = {
    user_symptoms: [],
    user_possible_disease: [],
  };

  Disease = {
    aids: ['fever', 'cough', 'dysentery'],
    corona: ['fever', 'cough', 'breathe_problem'],
    heart_attack: ['angina', 'pain', 'head_ache'],
  };
  toggleSymptom = (e) => {
    let user_symptoms = this.state.user_symptoms;
    if (user_symptoms.includes(e.target.value)) {
      //we already have this symptom then remove it
      user_symptoms = user_symptoms.filter(
        (s) => s !== e.target.value
      );
    } else {
      //we dont have the symptom so add it
      user_symptoms = [...user_symptoms, e.target.value];
    }
    this.setState({
      user_symptoms,
      user_possible_disease: user_symptoms.length //do we have symptoms
        ? Object.entries(this.Disease) //look for deseases
            .filter(([, diseaseSymptom]) =>
              user_symptoms.every((
                s //all symptoms are symptoms of disease
              ) => diseaseSymptom.includes(s))
            )
            .map(([key]) => key) //only need key of the object
        : [],
    });
  };

  render() {
    return (
      <div>
        <ul>
          {this.state.user_possible_disease.map((d) => (
            <li key={d}>{d}</li>
          ))}
        </ul>
        <button
          value="cough"
          className="unclicked"
          onClick={this.toggleSymptom}
        >
          cough
        </button>
        <button
          value="angina"
          className="unclicked"
          onClick={this.toggleSymptom}
        >
          angina
        </button>
        <button
          value="pain"
          className="unclicked"
          onClick={this.toggleSymptom}
        >
          pain
        </button>
        <button
          value="breathe_problem"
          className="unclicked"
          onClick={this.toggleSymptom}
        >
          breathe problem
        </button>
      </div>
    );
  }
}
ReactDOM.render(<App />, document.getElementById('root'));

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


<div id="root"></div>

Answer 2

首先，我建议将选定的疾病存储在JSON中，而不是数组中。

state = {
  user_possible_disease = {}
}

然后定义onButtonClick函数：

onButtonClick (e) {
    const disease = e.target.value;
    const isActive = this.state.user_possible_disease[disease];
    if (isActive) {
       // Remove this disease from state;
       const { [disease]: _, ...restDiseases } = this.state.user_possible_disease;
       this.setState(restDiseases);
    } else {
       // Add this disease to state;
       this.setState({ 
          ...this.state.user_possible_disease, 
          [disease]: Disease[disease] 
       })
    }
}

最后将onButtonClick函数附加到每个按钮：

  <button 
     value='cough' 
     onClick={this.onButtonClick}
     className={this.state.user_possible_disease['cough'] ? 'clicked' : 'unclicked'} />

还有一个提示：尽量不要重复任何代码/值。例如，当用户单击按钮时，我们会将一系列相同的症状存储到状态中。该数组既以疾病常数也以状态存在。更好的做法是将选定的疾病密钥存储在您的状态下，例如：['aids'，'corona']，然后当用户提交表格时，通过循环选定的疾病（从状态开始）来生成有效载荷请求），找到它们的相关症状并将其推入有效载荷。这样，您可以脱离组件的状态，例如它保存的数据更少。

Answer 3

向按钮添加onClick事件，然后根据所单击按钮的值设置正确的疾病。

const Disease = {
  corona: ["fever", "cough", "breathe_problem"]
};

class App extends React.Component {
  state = {
    user_possible_disease: []
  };

  // This function will be called for all buttons
  setPossibleDiseases = (event) => {
    // The Disease[event.target.value] fetches the diseases from the Diseases object
    this.setState({
      user_possible_disease: Disease[event.target.value]
    });
  };

  render() {
    return (
      <div>
        <div>
          {this.state.user_possible_disease.map((disease, index) => {
            return <h2 key={index}>{disease}</h2>;
          })}
        </div>
        <button
          value="corona"
          className="unclicked"
          onClick={this.setPossibleDiseases}
        >
          Corona
        </button>
      </div>
    );
  }
}

在您的示例中，{中有一个{{this.state.user_poss....，并且h2也不能/不应该位于p内。

单击按钮时做出改变状态的反应

3 个答案: