Javascript 尝试使用react钩子显示API中的数据时出现类型错误

我试图完成的是显示我进行的API调用中的数据名和电子邮件，然后通过在输入字段中键入我希望看到的名称过滤结果

当我只是尝试显示名称列表时，或者在本例中仅显示一个名称列表时，它会给我一条类型错误消息

TypeError:无法读取null的属性“0”

下面是我在这个简单的应用程序中用于学习/测试目的的代码

import React, { useEffect, useState } from "react";
import "./App.css";

import axios from "axios";

function App() {
  const [selected, setSelected] = useState(null);
  const [search, setSearch] = useState("");

  useEffect(() => {
    axios.get("https://jsonplaceholder.typicode.com/users").then(res => {
      setSelected(res.data);
    });
  }, []);

  console.log(selected);
  // console.log(selected.name)

  return (
    <div className="App">
      <div>Names below</div>
      <input
        type="text"
        value={search}
        onChange={e => {
          e.preventDefault();
          setSearch(e.target.value);

          const name = selected.filter(
            select => select.name === search,
            selected
          );
        }}
      />
      <div className="list">{selected[0].name}</div>
    </div>
  );
}

export default App;

---

这里，由于您在useEffect调用中进行axios调用，因此在useEffect调用发生之前，selected的值为null。 因此，由于selected.filter在null上运行，因为filter是数组的一个方法，所以它返回一个错误 因此，您需要将selected设置为默认值[]，即。 const[selected，setSelected]=useState[]；或者，如果selected的值为null，则需要在最终返回之前返回null，以便在填充selected的值之前不会呈现任何内容

if(!selected) {
  return null;
}

我添加了一个小提琴

定期访问

---

当选定对象确实存在时，您可以渲染名称部分。

我认为您可以尝试一下，因为它会在您键入名称时过滤

import React, { useEffect, useState } from "react";
import "./styles.css";

import axios from "axios";

function App() {
  const [selected, setSelected] = useState(null);
  const [search, setSearch] = useState("");

  useEffect(() => {
    axios.get("https://jsonplaceholder.typicode.com/users").then(res => {
      setSelected(res.data);
    });
  }, []);

  console.log(selected);
  // console.log(selected.name)

  return (
    <div className="App">
      <div>Names below</div>
      <input
        type="text"
        value={search}
        onChange={e => {
          e.preventDefault();
          setSearch(e.target.value);
        }}
      />
      {selected &&
        selected
          .filter(
            select => select.name.toLowerCase().includes(search),
            selected
          )
          .map(select => <div className="list">{select.name}</div>)}
    </div>
  );
}

export default App;

---

好的，我做了更改，并将默认状态设置为打开数组，但我不确定为什么无法读取选定数组中的数据？这是因为仅尝试调用选定的[0]。名称以显示它，因为它正直接尝试从空数组访问第一项。因此，您需要在显示数组之前检查数组是否有长度，或者更简单的方法是在发出axios请求之前检查null。这里是小提琴这项工作，我做了一个改变，开始选择状态开始作为一个空数组代替。真棒，这是更好的！！