Question

我正在创建一个涉及使用选择HTML输入的React组件。我已将其定义如下：

 <select className="form-control-mt-3" id="clientList" name="clientList" 
 onChange={this.handleClientChange} value={this.state.clientId || ''}>
      <option key={-1} value={-1}>Select a Client</option>
      {this.state.clients.map(o => {
           return <option key={o.clientId} value={o.clientId}>(o.clientName)
      </option>
      })}
      </select>

当我运行此页面时，我收到一个引用行this.state.clients.map的TypeError。

我认为以下代码块会分配客户端数组，以便select可以正确呈现：

constructor(props) {
    super(props);
    this.state = {
        modalIsOpen: false,
        clients: [],
        clientId: -1,
        clientAccounts: [],
        coldWallets: [],
        hotWallets: [],
        coins: []
    }
    this.handleClientChange = this.handleClientChange.bind(this);
    this.handleAccountChange = this.handleAccountChange.bind(this);
    this.handleColdWalletChange = this.handleColdWalletChange.bind(this);
    this.handleHotWalletChange = this.handleHotWalletChange.bind(this);
    this.handleCoinTypeChange = this.handleCoinTypeChange.bind(this);
}

handleClientChange(event) {
    const target = event.target;
    const value = target.value;
    const clientId = value;

    this.setState({
        clientId: clientId
    });
}

handleAccountChange(event) {
    const target = event.target;
    const value = target.value;
    const clientAccountId = value;

    this.setState({
       clientAccountId: clientAccountId
    });
}

handleColdWalletChange(event) {
    const target = event.target;
    const value = target.value;
    const coldWalletId = value;

    this.setState({
        coldWalletId: coldWalletId
    });
}

handleHotWalletChange(event){
    const target = event.target;
    const value = target.value;
    const hotWalletId = value;

    this.setState({
        hotWalletId: hotWalletId
    });
}

handleCoinTypeChange(event){
    const target = event.target;
    const value = target.value;
    const coinTypeId = value;

    this.setState({
        coinTypeId: coinTypeId
    });
}

componentWillReceiveProps = (nextProps) => {
    this.setState({
        modalIsOpen: nextProps.modalIsOpen,
        infoMessage: '',
        errorMessage: '',
        clients: nextProps.clients,
        clientAccounts: nextProps.clientAccounts,
        coldWallets: nextProps.coldWallets,
        hotWallets: nextProps.hotWallets,
        coins: nextProps.coins
    }, () => {
        let clientId = this.state.clientId;
        let selectedClientId = { clientId: -1, active: false};
        if(clientId !== -1) {
            clientId = parseInt(clientId, 10);
            clientService.getClient(this.state.clientId)
                .then((response) => {
                    selectedClientId = response.data;
                    this.setState({
                        infoMessage: '', errorMessage: '',
                        clientId: clientId,
                        client: Object.assign({}, selectedClientId)
                    });
                })
        }
        else{
            this.setState({
                infoMessage: '', errorMessage: '',
                clientId: clientId,
                client: Object.assign({}, selectedClientId)
            });
        }
        });
}

如果我调用ClientService来获取所述值，我如何确保我的客户名称在Select HTML输入中可用？

Answer 1

尝试此验证

<select className="form-control-mt-3" id="clientList" name="clientList" 
 onChange={this.handleClientChange} value={this.state.clientId || ''}>
      <option key={-1} value={-1}>Select a Client</option>
      {this.state.clients ? this.state.clients.map(o => {
           return <option key={o.clientId} value={o.clientId}>(o.clientName)
      </option>
      }) : <option>No values</option> } 
      </select>

动态选择引发TypeError：无法读取属性＆＃39; map＆＃39;未定义的

1 个答案: