父组件状态更新后，子组件中的道具未更新答案

【问题标题】：props not updating in child component after parent component's state is updated父组件状态更新后，子组件中的道具未更新
【发布时间】：2021-05-29 11:41:17
【问题描述】：

我正在开发一个 ToDo 应用程序，我传递了一个包含对象的任务数组，但是在将任务作为道具传递之后，它永远不会在 ToDoList 中更新。 请帮助我感谢您的帮助，并想知道其背后的逻辑。

App.js :- 这是所有代码都存在的入口文件

import { useState, useEffect } from 'react';
import './App.css';
import AddToDo from './components/addToDo';
import Filter from './components/Filter';
import ToDoList from './components/toDoList';

window.id = 0;

function App() {
    const [value, setvalue] = useState('');
    const [tasks, settasks] = useState([]);
    const handleChange = (e) => setvalue(e.target.value);
    const handleTasks = (val) => {
        tasks.push({ text: val, completed: false, id: window.id++ });
        settasks(tasks);
        localStorage.setItem('tasks', JSON.stringify(tasks));
    };

    return (
        <div className="row flex-center flex-middle flex">
            <div className="border border-primary padding-large margin-large no-responsive paper">
                <h3>Narries ToDo</h3>
                <AddToDo onChange={handleChange} value={value} onAdd={handleTasks} />
                <ToDoList tasks={tasks} />
                <Filter />
            </div>
        </div>
    );
}

export default App;

添加待办事项 这是我们通过更改 app.js 中的状态来添加任务的地方

import React from 'react';

const AddToDO = (props) => {
    return (
        <div className="row">
            <div className="col padding-right-small">
                <input type="text" placeholder="New Todo" value={props.value} onChange={props.onChange} />
            </div>
            <div className="col padding-left-small">
                <button value="Add" className="paper-btn btn-small" onClick={() => props.onAdd(props.value)}>
                    Add
                </button>
            </div>
        </div>
    );
};

export default AddToDO;

ToDoList.js：- 这是它应该更新任务道具的地方。

import React, { useState } from 'react';

const ToDoList = (props) => {
    return (
        <div className="child-borders">
            {props.tasks.map((task, id) => {
                return (
                    <div
                        className={
                            'padding-small margin-small ' +
                            (task.completed ? 'background-primary' : 'shadow shadow-hover')
                        }
                        key={id}
                    >
                        {task.text}
                    </div>
                );
            })}
        </div>
    );
};

export default ToDoList;

【问题讨论】：

标签： javascript reactjs react-native react-hooks client-server

【解决方案1】：

您已经改变了原始任务数组。每次更改值时，tasks 数组都会被覆盖。因此，您需要将任务数组更新为：

const handleTasks = (val) => {
  let customTask = { text: val, completed: false, id: window.id++ };
  settasks(tasks => [...tasks, customTask]);
  localStorage.setItem('tasks', JSON.stringify(tasks));
};

【讨论】：

感谢 Bipin，它很有帮助。它有效。

【解决方案2】：

你不应该直接改变/改变你的状态删除这一行tasks.push({ text: val, completed: false, id: window.id++ }); 在您的 ToDoList.js 中，它应该只是 task 而不是 task.text

【讨论】：

谢谢，Pratik，这个问题现在已经解决了。