Question

我有一个搜索页面，该页面查询api以获取对象数组。然后，为数组的每个元素呈现一个。我正在努力实现这样的目标：

export default class SearchScreen extends Component {
  constructor(props) {
    super(props);
    this.state = {
      results: null
    };
  }
  componentDidMount() {
    const apiUrl =
      "foo";
    fetch(apiUrl)
      .then(response => response.json())
      .then(response =>
        this.setState({
          results: response.results
        })
      );
  }

  render() {
      {this.state.results ? (
          const items = this.state.results.map((item, index) => {
               return (
                    <div>
                        <SearchResult name={item.name} />
                    </div>
                    );
       })
        return <div>{items}</div>;
       ) : (<div> LOADING...</div>)}
}

因此，如果this.state.results不为null，则应将其内容映射到const，然后生成SearchResult元素。

它抱怨const是一个意外的关键字。有条件地定义常量有什么问题吗？

Answer 1

语法不正确，下面是固定的一种：

render() {
      const items = this.state.results ? (
          this.state.results.map((item, index) => {
              return ( 
                  // Use better key
                    <div key={index}><SearchResult name={item.name} /></div>
              );
          }
        )) : 'LOADING...';

        return <div>{items}</div>;
}

Answer 2

语句（如const items = [];）不能与ternary operator一起使用。您只能使用表达式。如果要编写完整的语句，则必须使用if。

您可以通过三元运算符稍微更改逻辑以完成所需的操作：

return this.state.results ? (
    <div>
      {this.state.results.map((item, index) => (
        <div>
          <SearchResult name={item.name} />
        </div>
      ))}
    </div>
  ) :
  (
    <div> LOADING...</div>
  );

Answer 3

尝试像这样修复：

 render() {
    return (
      <div>
        {this.state.results
          ? this.state.results.map((item, index) => <SearchResult name={item.name} />)
          : 'LOADING...'}
      </div>
    );
  }

在react中有条件地定义一个const

3 个答案: