React函数组件父组件异步结果传递给子组件不渲染问题

问题排查 #

• 1. 组件返回的JSX存在多个根节点，React不支持直接返回多个并列元素，会直接导致渲染报错
• 2. 给子组件TaskResultBox传递的是getTasks函数引用而非tasks状态本身：函数引用不会随tasks状态变化而变化，既触发不了子组件重渲染，也无法在子组件中直接拿到任务数据
• 3. tasks初始值设为空字符串，若接口返回的是数组/对象类型的任务数据，直接赋值给textarea的value会显示[object Object]这类异常内容
• 4. onSearch回调未阻止默认事件，若外层包裹了form表单会触发页面刷新，导致状态重置

修复代码 #

SearchTask组件 #

import React, { useState, Fragment } from 'react'

function SearchTask({onAddTask}) {
    const [searchInputValue, setSearchInputValue] = useState('');
    // 若接口返回数组，初始值设为空数组更合理
    const [tasks, setTasks] = useState([]);
 
    const onSearchInputValueChange = (e) => {
        setSearchInputValue(e.target.value);
    };
    const onSearch = async(e) => {
        // 阻止默认事件
        e.preventDefault();
        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 (
        // 用Fragment包裹多个并列元素
        <Fragment>
            <InputBox onSearchInputValueChange={onSearchInputValueChange}/>
            <Button title="Search Tasks:" onClick={onSearch}/>
            {/* 直接传递tasks状态，不要传getTasks函数 */}
            <TaskResultBox taskResults={tasks}/>
        </Fragment>
    )
}

export default SearchTask

TaskResultBox组件 #

import React from 'react'
function TaskResultBox({taskResults}) {
    return (
        <div>
            <h1>Task Result:</h1>
            {/* 数组/对象转成格式化字符串再赋值给textarea */}
            <textarea value={JSON.stringify(taskResults, null, 2)} readOnly/>
        </div>
    )
}

export default TaskResultBox

内容的提问来源于stack exchange，提问作者ram4sof