Question

我是一个非常新的反应者，所以我确定我缺少一些非常简单的方法。我正在尝试完成一个简单的axios api提取并将响应设置为一种状态。我能够在控制台日志中看到数据，但是当我尝试将其设置为状态时似乎什么也没发生。我在各种博客的帮助下尝试了useState，useEffect，useReducer的方法，但是我看不到输出，所以我绝对做不对。

编辑：我正在尝试在页面加载而不是在点击事件上执行此操作。

我可以在react（https://reactjs.org/docs/hooks-state.html）上获得可用的反例，以解决任何问题。我正在跟踪几个博客中的混合示例，但看不到结果。

https://www.andreasreiterer.at/rest-api-react-hooks/

最终我想将api中的数据合并到Material表ui

任何有用的见解将不胜感激。在过去的两天里，我一直坚持这些。

function LandingPage = () => {

    const [rows, setRows] = useState([]);
    useEffect(() => {
        console.log("ent useeffect")
        const fetchData = async () => {
          const result = await axios(
            window.location.origin + "/api/MESampleData",
          );
          console.log("before if")
          if(result){console.log(result)}
          console.log("before setrows")
          setRows(result.data);
        };
        fetchData();
      }, []);

return (
        <div className="section">
            {<h6>It should render</h6>}
            <ul>
                {rows.map(row => 
                    <li>{row.item1}</li>
                    )}
            </ul>
</div>)
}

export default LandingPage;

sample output

Answer 1

尝试将fetchData函数拉到useEffect之外，但继续在useEffect内调用该函数。

Answer 2

啊废话。我明白你的意思了。我没有抓住正确的数据元素并将其放入setRows对象。我只是看到了结果数组，并以为是。

提取后无法使用反应挂钩（useState）查看状态输出

2 个答案: