如何修复状态变量内容不显示

Question

我正在构建一个小型应用程序。目前我一直在尝试显示后端给出的响应。

我一直在使用 this guide 来实现数据获取挂钩，除了尝试在列表中显示返回的条目外，一切正常。

组件中的代码如下所示：


    import React, { Fragment, useState, useEffect } from "react";
    import axios from 'axios';

    function Search() {
        const [zone, setZone] = useState('');
        const [results, setResults] = useState({entries: []});
        const [url, setUrl] = useState(
            `http://localhost:4000/entries/view/`
        );

        useEffect(() => {
            const fetchEntries = async () => {
                const result = await axios.get(url);
                setResults({entries: result.entries});
            };

            fetchEntries();
        }, [url]);

        return (
            <Fragment>
                <input type="text" value={zone} onChange={e => setZone(e.target.value)} />
                <button type="btn-primary" onClick={() => 
                    setUrl(`http://localhost:4000/entries/view/${zone}`)
                }>
                    Search
                </button>
                <ul>
                    {results.entries.map(item => (
                        <li key={item._id}>
                            <div>{item.entry_description}</div>
                        </li>
                    ))}
                </ul>
            </Fragment>
        );
    }
    export default Search;

下面是 API 响应的示例：

{
    "entries": [
        {
            "_id": "5d365d9af8b0625f345a8cea",
            "entry_description": "Test ui",
            "entry_time": "Now",
            "entry_author": "Me",
            "entry_zone": "12345",
            "__v": 0
        },
        {
            "_id": "5d367e3bbd8b13188c0d638b",
            "entry_description": "Test still?",
            "entry_time": "Now",
            "entry_author": "Me",
            "entry_zone": "12345",
            "__v": 0
        }
    ]
}

我收到的当前错误消息是：

The above error occurred in the <Search> component:
    in Search (created by Context.Consumer)
    in Route (at App.js:21)
    in div (at App.js:14)
    in Router (created by BrowserRouter)
    in BrowserRouter (at App.js:13)
    in App (at src/index.js:7)

Consider adding an error boundary to your tree to customize error handling behavior.

TypeError: results.entries is undefined
home.component.js:30

TypeError: results.entries is undefined
home.component.js:30

非常感谢您帮助我找出造成这种情况的原因。

Answer 1

您似乎将 api 结果包装在一个数组中，而您只需要将其分配给 enteries

    useEffect(() => {
        const fetchEntries = async () => {
            const result = await axios.get(url);
            setResults({entries: result.entries});
        };

        fetchEntries();
    }, [url]);

Answer 2

所以我现在已经可以使用了，虽然我不太明白。我使用 this code 并更改了一些名称以使用我的变量名称。我认为修复与此代码中的 useEffect() 依赖关系有关，包括查询变量。在我的原始代码中，我将它们组合成一个 url，然后在依赖项中也没有包含区域变量。

这是我的最终代码：

import React, { useState, useEffect } from "react";
import axios from 'axios';

function Search() {
  const [data, setData] = useState({ entries: [] });
  const [query, setQuery] = useState('Enter zone');

  useEffect(() => {
    let ignore = false;

    async function fetchData() {
      const result = await axios('http://localhost:4000/entries/view/' + query);
      if (!ignore) setData(result.data);
    }

    fetchData();
    return () => { ignore = true; }
  }, [query]);

  return (
    <>
      <input value={query} onChange={e => setQuery(e.target.value)} />
      <ul>
        {data.entries.map(item => (
          <li key={item._id}>
            <p>{item.entry_description}</p>
          </li>
        ))}
      </ul>
    </>
  );
}
export default Search;

如何修复状态变量内容不显示

How to fix state variable contents not displaying

reactjs

react-hooks