Question

我尝试使用 Route 提供带有参数的数据并使用参数，从服务器获取数据并打印出来。但 useEffect 不起作用

export default function Board({ match }) {
  const [content, setContent] = useState([]);

  useEffect(() => {
    getOnePost(match.params.number).then((response) => {
      setContent(response);
    });
    console.log(content);
  }, []);

  return (
    <div>
      <div>hi</div>
    </div>
  );
}

          <PrivateRoute
            path="/board/:number"
            authenticated={this.state.authenticated}
            component={Board}
          />

Answer 1

我认为您需要从 useParams 挂钩接收 url 参数。

import { useParams } from "react-router-dom";

export default function Board() {
  ...

  const { number } = useParams(); // get url parameters 

  useEffect(() => {
    getOnePost(number).then((response) => {
      setContent(response);
    });
    console.log(content);
  }, []);

  ...

}

Answer 2

我认为 getonepost 函数没有定义为异步函数。请使用此代码。

useEffect(() => {
getOnePost(match.params.number).then((response) => {
  setContent(response);
  console.log(content);
});

}, []); 或者你也可以试试这个。

const [ update, setUpdate]=useState(true);

 useEffect(() => {
          console.log(content);
        });
        
      }, [update]);

    getOnePost(match.params.number).then((response) => {
          setContent(response);
          setUpdate(!update);
    }

Answer 3

您应该将 match.params.number 作为第二个参数传递给 useEffect。

 useEffect(() => {
    getOnePost(match.params.number).then((response) => {
      setContent(response);
    });
    console.log(content);
  }, [match.params.number]);

Answer 4

getOnePost 是一个异步承诺。因此，在下一行尝试 console.log(content) 不会等待 promise 解决，而是会记录 [] 的初始值。

这是预期的行为。

如果您真的想在 content 更改时记录它的值，请添加另一个依赖于 useEffect 的 content 并将 console.log 放在那里。

export default function Board({ match }) {
  const [content, setContent] = useState([]);

  useEffect(() => {
    getOnePost(match.params.number).then((response) => {
      setContent(response);
    });
  }, []);

  useEffect(() => {
    console.log(content);
  }, [content])

  return (
    <div>
      <div>hi</div>
    </div>
  );
}

Answer 5

看，您在 console.log 语句之外使用 .then，因为您正在编写异步代码，它会先 console.log content 然后向服务器发出请求。如果你想在 then 语句中看到 response，console.log 它像这样：-

  const [content, setContent] = useState([]);

  useEffect(() => {
    getOnePost(match.params.number).then((response) => {
      setContent(response);
      console.log(response);
    });
    
  }, []);

如果您想检查天气是否存储在状态中，您可以这样做：-

const [content, setContent] = useState([]);

  useEffect(() => {
    getOnePost(match.params.number).then((response) => {
      setContent(response);
    });
    
  }, []);
useEffect(() => {
   console.log(content)
}, [content])

第一次运行 useEffect 从 api 获取数据，第二次运行 content 状态改变。

如何使用 useEffect 加载

5 个答案: