未捕获的类型错误：无法读取属性“值” ReactJS 中的 null

Question

我正在尝试在 React 中创建一个搜索栏，通过 TMDB API 进行搜索，但遇到了一些问题。每当我在搜索栏中输入内容时，都会收到一条错误消息，指出无法读取 null 的属性（读取“值”），并且我不确定问题可能是什么以及为什么它返回为 null。 中的提及

 function Search() {
  const [searchQuery, setSearchQuery] = useState(""); 
  const [timeoutId, updateTimeoutId] = useState();

  const fetchData = async (searchString) => {
    const response = await axios.get(`https://api.themoviedb.org/3/search/movie?api_key=f134dfeac1ebb17feefa58d7f94e94cd&language=en-US&query=${searchString}&page=1&include_adult=false`);
    console.log(response);
  };

  const onTextChange = (e) => {
    clearTimeout(timeoutId);
    setSearchQuery(e.target.value);
    const timeout = setTimeout(() => fetchData(e.target.value), 500);
    updateTimeoutId(timeout);
  };

  return(
    <div> 
      <SearchBox>
      <SearchInput placeholder="SEARCH" value={searchQuery} onChange={onTextChange}></SearchInput>
      </SearchBox></div>
  );
}

我称这是 searchInput 代码

const SearchInput = styled.input`
  color: black;
  font-size: 16px;
  font-weight: bold;
  border: none;
  outline: none;
  margin-left: 15px;
`;

Answer 1

您可以尝试使用 可选链接 (<代码>?.)

function Search() {
  const [searchQuery, setSearchQuery] = useState(""); 
  const [timeoutId, updateTimeoutId] = useState();

  const fetchData = async (searchString) => {
    const response = await axios.get(`https://api.themoviedb.org/3/search/movie?api_key=f134dfeac1ebb17feefa58d7f94e94cd&language=en-US&query=${searchString}&page=1&include_adult=false`);
    console.log(response);
  };

  const onTextChange = (e) => {
    clearTimeout(timeoutId);
    setSearchQuery(e.target?.value);
    const timeout = setTimeout(() => fetchData(e.target?.value), 500);
    updateTimeoutId(timeout);
  };

  return(
    <div> 
      <SearchBox>
      <SearchInput placeholder="SEARCH" value={searchQuery} onChange={onTextChange}></SearchInput>
      </SearchBox></div>
  );
}

Answer 2

一旦超时从 Web API 返回，e.target.value 就不再存在。该函数已结束执行，e 参数将不再存在。

相反，请在 setTimeout 回调函数中尝试使用 useRef 而不是 e.target.value，这样当它返回时，它可以引用最新的更改。

像这样的东西：

 function Search() {
  const [searchQuery, setSearchQuery] = useState("");
  const [timeoutId, updateTimeoutId] = useState();

  const query = useRef(searchQuery);

  const fetchData = async (searchString) => {
    const response = await axios.get(`https://api.themoviedb.org/3/search/movie?api_key=f134dfeac1ebb17feefa58d7f94e94cd&language=en-US&query=${searchString}&page=1&include_adult=false`);
    console.log(response);
  };

  const onTextChange = (e) => {
    clearTimeout(timeoutId);
    setSearchQuery(e.target.value);
    query.current = e.target.value;
    const timeout = setTimeout(() => fetchData(query.current), 500);
    updateTimeoutId(timeout);
  };

  return(
    <div> 
      <SearchBox>
      <SearchInput placeholder="SEARCH" value={searchQuery} onChange={onTextChange}></SearchInput>
      </SearchBox></div>
  );

Answer 3

再次查看您的代码后，我怀疑这是超时回调中的第二个事件访问，该事件访问已被取消。您应该在回调范围内保存对事件值的引用，这样就不会持久存在对事件对象的依赖。

const onTextChange = (e) => {
  const { value } = e.target;

  clearTimeout(timeoutId);

  setSearchQuery(value);
  const timeout = setTimeout(() => fetchData(value), 500);
  updateTimeoutId(timeout);
};

另外，仅供参考，除非您需要 timeoutId 作为状态的一部分来触发重新渲染或其他内容，否则更常见的是在此处使用 React 引用来存储对计时器 id 的引用。据我所知，您只需限制 fetchData 调用，无需触发不必要的渲染。

例子：

const timeoutIdRef = useRef();

useEffect(() => {
  // clear any running timeouts upon component unmount
  return () => clearTimeout(timeoutIdRef.current);
}, []);

...

const onTextChange = (e) => {
  const { value } = e.target;

  clearTimeout(timeoutIdRef.current);

  setSearchQuery(value);
  timeoutIdRef.current = setTimeout(() => fetchData(value), 500);
};