無法從const數組映射中渲染

Question

我需要創建一個const組件來呈現選項及其選項，但是由於代碼返回的選項沒有任何選項，因此無法呈現選項字段。問題在哪裏？

謝謝你的建議。

import React from "react"; 

const FilterSelect = (props) => { 
    const {title, name, selectedValue, optionsValue, onChange} = {...props}; 

    const renderOptions = (optionsValue) => { 
     optionsValue.map((optionValue, i) => 
      <option value={optionValue.value} key={i}>{optionValue.name}</option> 
     ); 
    }; 

    return (
     <div className="filters-content-block"> 
      <h3 className="filters-subtitle">{title}</h3> 
      <select className="sl sl-fullwidth" onChange={onChange} required> 
       {renderOptions} 
      </select> 
     </div> 
    ); 
}; 

export default FilterSelect; 

Answer 1

你的renderOptions是一個函數。您必須將其稱爲傳遞optionsValue作爲參數;或者更改代碼，以便renderOptions不再是功能，但一個數組，像這樣：

const renderOptions = optionsValue.map((optionValue, i) => 
    <option value={optionValue.value} key={i}>{optionValue.name}</option> 
    ); 

Answer 2

您定義renderOptions作爲一種方法，但忘了發送optionsValue它。

<select className="sl sl-fullwidth" onChange={onChange} required> 
    {renderOptions(optionsValue)} 
</select> 

Answer 3

renderOptions是一個函數。所以，你必須調用它像這樣：

<select className="sl sl-fullwidth" onChange={onChange} required> 
    {renderOptions()} 
</select> 

你可以擺脫optionsValue PARAM的，因爲你的道具​​擁有它。你必須從函數返回。試着考慮一下：

const renderOptions =() => { 
     return optionsValue.map((optionValue, i) => 
      <option value={optionValue.value} key={i}>{optionValue.name}</option> 
     ); 
    };