Question

我需要创建一个const组件来使用其选项呈现select，但是我无法呈现选项字段，因为代码返回没有任何选项的select。问题出在哪里？

谢谢你的建议。

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。

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

Answer 2

renderOptions是一个函数。所以你必须这样称呼它：

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

你可以摆脱optionsValue param，因为你有来自props的。你必须从函数返回。试着考虑一下：

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

Answer 3

您的renderOptions是一个功能。您必须将其称为optionsValue作为参数;或者更改代码，使renderOptions不再是函数而是数组，如下所示：

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

无法从const上的数组映射进行渲染

3 个答案: