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'
在 state && 之前添加相同的 map 条件

编辑：

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

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

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

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

尽管不满足条件，但有条件的 JSX 呈现

3 个答案: