将选定的下拉值显示为列表

Question

我是React JS的初学者。 我遵循了教程，并尝试在用户选择下拉值并且所选值连接到列表时创建一个项目。 我在this.setState上收到错误消息，不知道如何解决问题。 有人可以给我指示吗？ 非常感谢！

App.js

import React, { Component } from "react";
import "./App.css";
import Institution from "./Institution/Institution";
import InstitutionList from "./InstitutionList/InstitutionList";
const institutions = [
  { id: "School1", value: 4000, key: 1 },
  { id: "School2", value: 3800, key: 2 },
  { id: "School3", value: 3850, key: 3 }
];
const selectedList = [];

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      InstitutionList: []
    };
  }

  _handleSelect(event) {
    event.preventDefault();
    //create an object
    const institution = {
      id: event.target.id,
      value: event.target.value,
      key: event.target.key
    };

    //add school to selectedList
    this.setState({
      selectedList: [this.state.selectedList.concat(institution)]
      // selectedVal: event.target.value
    });
  }

  render() {
    return (
      <div className="App">
        <form>
          Select a school:
          <select onChange={this._handleSelect.bind(this)}>
            <option>Select</option>
            <option>School1</option>
            <option>Schoo2</option>
            <option>School3</option>
          </select>
        </form>
        <p>
          <InstitutionList selectedList={selectedList} />
        </p>
      </div>
    );
  }
}

export default App;

Institution.js

import React from "react";

const Institution = props => {
  return (
    <div className="Institution">
      <p>Name: {props.id} </p>
      <p>
        Tuition:
        {props.value}
      </p>
    </div>
  );
};

export default Institution;

InstitutionList.js

import React from "react";
import Institution from "../Institution/Institution";
const InstitutionList = props => {
  return props.selectedList.map(institution => {
    return (
      <Institution
        key={institution.key}
        id={institution.id}
        value={institution.value}
      />
    );
  });
};

export default InstitutionList;

Answer 1

首次运行该状态时， this.state.selectedList不存在，因为您的初始状态仅包含InstitutionList 。 因此this.state.selectedList.concat将失败，因为您尝试在undefined对象上调用concat 。

此外，您的selectedList: [this.state.selectedList.concat(institution)]将保留嵌套数组数组。 您最可能需要

selectedList: [...this.state.selectedList].concat(institution)

此外，在根据前一个状态修改状态时，建议通过功能版本（ https://reactjs.org/docs/react-component.html#setstate ）

所以

this.setState((state) = > ({
      selectedList: [...state.selectedList, institution]
    }));

您可以同时使用解决第一个问题

this.setState((state) = > ({
      selectedList: [...(state.selectedList || []), institution]
    }));

Answer 2

以下是App.js的修订代码。 当我选择下拉值时，不会显示在渲染中。 现在没有错误消息。

import React, { Component } from 'react';
import './App.css';
import Institution from './Institution/Institution';
import InstitutionList from './InstitutionList/InstitutionList';
const  institutions=[ 
{id:'School1', value:4000, key:1},
{id:'School2', value:3800, key:2},
{id: 'School3', value:3850,key:3}
];
const selectedList=[];
class App extends Component {

constructor(props){
super(props);
this.state={
  selectedList:[]

  };
}


 _handleSelect(event){
 event.preventDefault();
//create an object
 const institution={
  id:event.target.id,
  value:event.target.value,
  key:event.target.key
};

//call add institution to institutionsbox

 this.setState((state) => ({
 selectedList: [...state.selectedList].concat(institution)
}));
}
render() {
return (
  <div className="App">

    <form>

         Select a school:
         <select onChange={this._handleSelect.bind(this)} >
           <option>Select</option>
           {institutions.map((institution)=>{return (<option value={institution.key}>{institution.id}</option>);})}


         </select>

         </form>
      <p>Display <InstitutionList  selectedList={selectedList} /></p>

  </div>
  );
  }
}

export default App;