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

Question

我正在尝试获取一个下拉菜单来显示用户从上一页选择的主题名称（目前，它默认返回 'Topics'）。

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

所以，我正在尝试使用条件呈现来让 'Topics' 呈现为默认呈现，而主题本身是通过获取请求收集的。

<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] 未定义时它将 return '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>

按照你的做法，还有一些其他问题，但我认为它们与你的问题无关。首先，您正在将列表的第一个选项更改为您的 selected 值。相反，您应该设置 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 组件版本

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>
    );
  }
}

此外，在您的渲染方法中，您不能有 if 语句，因为那里只允许 javascript 表达式。如果您需要使用条件语句，请使用三元运算符或使用 if 块创建一个函数，该函数可以从渲染中调用。您可以阅读有关表达式 here

的更多信息

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

How to conditionally render an attribute of state

reactjs

conditional-rendering