从函数更新道具时更新组件答案

【问题标题】：Updating a component when props update from a function从函数更新道具时更新组件
【发布时间】：2020-12-13 14:09:42
【问题描述】：

我在更改组件后更新组件时遇到了一些问题。

我有一个表单组件，我希望它向显示框组件发送一些数据。这个想法是，Box 将在每次提交表单时更新并添加新任务。

我为此使用了钩子。到目前为止，我有一个 handleInput()，它返回 Display 组件并通过 props 传递对象。但是，我没有在 Display 组件中看到结果，即使我添加了一个 useEffect 来在每次更新道具时刷新。 Display 组件中的 console.log() 仅在我刷新页面时运行一次，但在我发送新表单时不会发生任何其他事情。

这是表格：

function handleInput(e) {
    e.preventDefault(); 
    const submittedTask = {
        name: taskName,
        category: category,
        time: estimatedTime,
        deadline: deadline
    };
    return <DisplayTasks task={submittedTask}/>
}

这是不重新渲染的组件：

const DisplayContainer = ({ task }) => {
    const [ availableTasks, setAvailableTasks ] = useState({});

    useEffect(() => {
        if (task) { setAvailableTasks(task) };
        console.log("Current task: ", task}
    }, [task])

    //...
}

【问题讨论】：

标签： reactjs forms react-hooks react-props react-component

【解决方案1】：

可能是因为prop，task是一个对象，而在js中对象是通过引用赋值的。做这样的事情。

function handleInput(e) {
    e.preventDefault(); 
    const submittedTask = {
        name: taskName,
        category: category,
        time: estimatedTime,
        deadline: deadline
    };
    return <DisplayTasks task={...submittedTask}/>
}

【讨论】：