尽管条件未满足，但条件 JSX 仍会呈现

Question

我有一个有条件渲染的组件。尽管不满足条件，但它似乎无论如何都在尝试渲染（我得到一个错误）。

一个简化的例子：

import { useState } from 'react';

const [state, setState] = useState(null)
console.log(state)
console.log(typeof state)

return (
  <div>
    {state && 
      <div>
        {state.map(element => <div>{element.title}</div>)}
      </div>
    }
  </div>
)

我收到错误消息：“无法读取 null 的属性 'map'”。我很确定state && 之后的任何内容都不应该触发，所以我对发生的事情感到困惑。

如果可能，我想将null 作为我的状态的初始值（如果我提供一个空数组，这个错误就会消失）。

我已经尝试过各种情况，包括：

• state !== null
• typeOf state === 'object'
• 在map 之前添加相同的state && 条件

编辑：

console.log(state) 打印 null 但 console.log(typeof state) 打印 object; state 从未更新，null 与 object 同时打印，因此有点令人困惑，尽管如此，这确定了问题的根源。

有人向我指出typeof null 确实是object。

我正在使用处理jsx 的@emotion/react，所以问题可能源于那里。

Answer 1

您忘记发起useState。

并且不要忘记从 react 顶部导入 useState 页面

import React,{useState} from 'react'; //from react
const [state, setState] = useState(null) // missing useState

Answer 2

你必须在 useState 钩子中定义你的状态。

import React,{useState} from 'react';

const [state, setState] = useState(null)

Answer 3

您可能正在寻找这个：

import { useState } from 'react';

const [state, setState] = useState([])

return (
  <div>
    {state.length > 0 && 
      <div>
        {state.map(element => <div>{element.title}</div>)}
      </div>
    }
  </div>
)

由于 JSX 声明性质，编译器引擎必须运行 state.map(...) 就像您放在大括号中的所有内容一样才能渲染 JSX，这就是发生运行时错误的原因，尽管不会渲染元素。为了避免这个错误，可以这样写{state && state.map(element => <div>{element.title}</div>)}