Question

我正在尝试获取一个下拉菜单，以显示用户从上一页中选择的主题名称（当前，默认情况下，它返回到“主题”。）

虽然我可以在控制台中获得$r.state.topics[$r.state.topicSelected].name，但是当我在代码中放入this.state.topics[this.state.topicSelected].name时却出现了未定义的错误。

因此，我尝试使用条件渲染将“主题”渲染作为默认渲染，而主题本身是通过访存请求收集的。

<select
value={this.state.topicSelected}
onChange={this.onTopicClick}
className="sort"
data-element>
    {
    // Add this option in the .then() when populating siteCategories()
    [<option key={this.state.topicSelected}
      value={this.state.topicSelected}>({if 
       (this.state.topics[this.state.topicSelected].name == undefined) {
       'Topics'
    } else {
    this.state.topics[this.state.topicSelected].name
     }})
    </option>].concat(
this.state.topics.map(function (topic) {
 return (<option
 key={topic.id}
 value={topic.id}>{topic.name}</option>);
  }))
 }
</select>

我遇到了意外的令牌错误，但是我尝试了各种语法组合但都没有碰到运气-如何正确运行这种条件格式？

Answer 1

您可以使用三元表达式? :。像这样

this.state.topics[this.state.topicSelected] ? this.state.topics[this.state.topicSelected].name : 'Topics'

由于undefined是一个伪造的值，当this.state.topics[this.state.topicSelected]未定义时它将返回“ Topics”。

<select
  value={this.state.topicSelected}
  onChange={this.onTopicClick}
  className="sort"
  data-element>
      <option key={this.state.topicSelected}
        value={this.state.topicSelected}>
        {this.state.topics[this.state.topicSelected] ?
         this.state.topics[this.state.topicSelected].name : 'Topics'}
      </option>
      {this.state.topics.map(function (topic) {
         return (<option key={topic.id} value={topic.id}>{topic.name}</option>);
      })}
</select>

在您做事的方式上，还存在其他一些问题，但是我认为它们与您的问题无关。例如，您正在将列表的第一个选项更改为所选值。相反，您应该设置select的值，该值会自动从列表中选择正确的选项。这是我的写法：

render() {
<select
  value={this.state.topicSelected}
  onChange={this.onTopicClick}
  className="sort"
  data-element>
      <option value={0}>Topics</option>
      {this.state.topics.map(topic => 
             <option key={topic.id} value={topic.id}>{topic.name}</option>))}
</select>
}

Answer 2

您还可以使其成为受控组件并按如下所示默认状态

function App() {
  const [topics] = useState(["Math", "Geography"]);
  const [selectedTopic, setSelected] = useState("Topic");
  return (
    <select
      value={selectedTopic}
      onChange={(e) => setSelected(e.target.value)}
      className="sort"
    >
      <option>
        Topic
      </option>
      {topics.map(topic => (
        <option key={topic} value={topic}>
          {topic}
        </option>
      ))}
    </select>
  );
}

组件的类版本

class App extends React.Component {
  state = {
    topics: ["Math", "Geography"],
    selectedTopic: "Topic",
  }

  render() {
    const { selectedTopic, topics } = this.state;
    return (
      <select
      value={selectedTopic}
      onChange={(e) => this.setState({ selectedTopic: e.target.value })}
      className="sort"
      >
      <option>
        Topic
      </option>
      {topics.map(topic => (
        <option key={topic} value={topic}>
          {topic}
        </option>
      ))}
    </select>
    );
  }
}

在您的render方法中，您也不能包含if语句，因为其中仅允许javascript表达式。如果需要使用条件语句，请使用三元运算符或使用if块创建函数，可以从render调用该函数。您可以阅读有关表达式here

的更多信息

如何有条件地呈现状态属性

2 个答案: