将异步结果从父组件传递给子组件反应功能组件

Posted 2023-02-21

【中文标题】将异步结果从父组件传递给子组件反应功能组件

【英文标题】：pass async results from parent to child component react functional component

【发布时间】：2021-11-06 15:31:55

【问题描述】：

我有一个功能组件，旨在搜索任务并显示在任务结果框中，异步任务数据通过 useState 挂钩设置并传递给子组件“TaskResultBox”。状态不会改变，值也不会呈现到子组件中。我已经使用调试验证了从 API 检索到的值。但不会重新渲染子组件中的数据。

import React from 'react'
import useState from 'react'


function SearchTask(onAddTask) 
    const [searchInputValue, setSearchInputValue] = useState('');
    const [tasks, setTasks] = useState('');
 
    const getTasks = () => 
        return tasks;
    ;
    const onSearchInputValueChange = (e) => 
        setSearchInputValue(e.target.value);
    ;
    const onSearch = async(e) => 
        const theRequestOpts = 
            method: 'POST',
            headers:  'Content-Type': 'application/json' ,
            body: JSON.stringify( searchString: searchInputValue )
        ;
        const response = await fetch('/api/searchTasks', theRequestOpts);
        const data = await response.json();
        setTasks(data);
    ;
    return (
        <InputBox onSearchInputValueChange=onSearchInputValueChange/>
        <Button title="Search Tasks:" onClick=onSearch/>
        <TaskResultBox taskResults=getTasks/>
    )


export default SearchTask

//TaskTesultBox.js

import React from 'react'
function TaskResultBox(taskResults) 
    return (
        <div>
            <h1>Task Result:</h1>
            <textarea value=taskResults/>
        </div>
    )


export default TaskResultBox

【问题讨论】：

你的TaskResultBox里有什么，请贴在这里好吗？

我已经回答了，看看有没有帮助

你可能会觉得this blog about reactive programming with react很有趣

【参考方案1】：

getTasks 是一个返回tasks 对象的函数，因此要获取返回变量，您需要调用它

所以改成：

<TaskResultBox taskResults=getTasks()/>  //<-- Invoke it

---

但是我想知道为什么你需要一个函数来返回那个变量而不是直接把它放到 props 中？

像这样：

<TaskResultBox taskResults=tasks/>