为什么有条件渲染不起作用？

Question

在我的JSX返回语句中，功能组件，我的代码在下面的行中打破，并带有消息：

“ ForeforeKeys [0]未定义。”

{foreignKeys && <h4>{foreignKeys[0].values.map((item) => <p >ID: {item.id} NAME: {item.name}</p>)}</h4>}

注：我也尝试了：

{!!foreignKeys && <h4>{foreignKeys[0].values.map((item) => <p >ID: {item.id} NAME: {item.name}</p>)}</h4>} 和

{foreignKeys.length > 0 && <h4>{foreignKeys[0].values.map((item) => <p >ID: {item.id} NAME: {item.name}</p>)}</h4>} 我理解是，如果foreignkeys是“假”（即一个空数组），那么代码甚至不会尝试评估&&clause的第二部分，即foreignkeys [0]。 。 。 ）。如果我的理解是正确的，为什么代码在

foreignkeys[0]

？上违反 I.E。，如果Foreignkeys是虚假的，那么代码不应尝试评估foreignkeys[0]...，如果不是虚假的，那么foreignkeys[0]

应该定义，对吗？我想念什么？谢谢！

注：参考：外国人是一个状态变量，定义下面：const [foreignKeys, setForeignKeys] = useState([]);

仅在第一个渲染上设置一次：

useEffect(() => {
    fetchItems();
  }, []);

. . .

  const fetchItems = async () => {
    try {
      const res = await axios.get(`http://localhost:5000/api/foreignkeys`, {params: {table: tblName}});
      if (res.data.length!==0) {
        res.data.map((item) => {
          setForeignKeys([...foreignKeys, item]);
        });
      }

Answer 1

其原因不起作用，因为您是不真实的，您就是您。当JavaScript在布尔上下文中考虑“ true”的任何值时，该变量将是

thimible

。在您的情况下，

foreignKeys被初始化为一个空数组（foreignKeys），当它包含不是foreignKeys

，

useState([])

，

null，undefined

，

false

，或一个空字符串

0时，它将是真实的。

启用检查真相，您可以检查数组的长度。

NaN