reactjs - 将异步结果从父组件传递到子组件 react 功能组件

Question

我有一个功能组件，旨在搜索任务并在任务结果框中显示，异步任务数据通过 useState Hook 设置并传递给子组件“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

Answer 1

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

所以改为:

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

---

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

像这样:

<TaskResultBox taskResults={tasks}/>