小编D. *_*ier的帖子

我正在尝试向特定于列表中项目的跨度标记呈现消息。我读过很多关于 React 'refs' 的内容，但不知道如何在引用消息后用消息填充跨度。

因此，有一个项目列表，每个项目行都有自己的按钮，该按钮会触发具有与该项目关联的 id 的 API。根据 API 响应，我想用响应消息更新 span 标签，但仅限于该项目

创建列表时，项目将循环通过，每个项目都包含此

<span ref={'msg' + data.id}></span><Button onClick={() => this.handleResend(data.id)}>Resend Email</Button>

API 调用后，我想引用特定的跨度并在其中呈现正确的消息。但我无法弄清楚如何在代码的这一点上渲染到跨度。我知道这行不通，但这本质上就是我想要做的。有任何想法吗？

if (response.status === 200) {
    this.refs['msg' + id] = "Email sent";

即使在 useCallback 之外调用它时会填充它，也会useCallback出现在 中使用的依赖项。null我什至尝试删除 useCallback 并data在常规函数中使用该变量。它仍然为空。知道为什么会发生这种情况吗？

const [data, setData] = useState(null);

useEffect(() => { //on page load
  const data = fetchData();
  setData(data)
}, []);

const func = useCallback(async (payload) => {
    console.debug(data); //null
    if (data) //call api with payload
}, [data]);

console.debug(data); //correct population of data

return <MyComponent onSubmit={func} /> //passed to and called from second child down from here