reactjs - 钩子(Hook)和不可变状态

Question

如果这个问题之前已经得到解答，我提前表示歉意(对于这篇长文，但我已尽力做到具体)。但是，我找到的答案并不完全令我满意。

我想在我的项目中使用新的令人惊叹的 React Hooks。到目前为止我所做的一切都是直截了当的。

现在我遇到了一个更复杂的示例，我不确定应该如何最好地解决这个问题。

比方说，我的状态中有一个更复杂的物体(至少它不是平坦的)。

{
    persons: [
        {
            id: 1,
            name: 'Joe Doe',
            age: 35,
            country: 'Spain',
            interests: [
                { id: 1, en: 'Football', es: 'Fútbol' },
                { id: 2, en: 'Travelling', es: 'Viajar' }
            ]
        },
        {
            id: 2,
            name: 'Foo Bar',
            age: 28,
            country: 'Spain',
            interests: [
                { id: 3, en: 'Computers', es: 'Computadoras' },
                { id: 4, en: 'Cooking', es: 'Cocinar' }
            ]
        }
    ],
    amount: 2,
    foo: 'bar'
}

最好的方法是什么:

1. 向我的同事数组添加一个项目(一个对象)
2. 将项目添加到特定的“兴趣”数组中？
3. 操作数组中对象内的属性值？
4. 更改 person 数组外部的值，例如 foo？

使用 useState 钩子(Hook)？

下面的代码示例将尝试说明每个问题。他们没有经过测试...

让我们假设我有一个以此开头的容器。它还包括帖子其余部分中拆分的功能。

const [colleagues, setColleagues] = useState({});

// using the useEffect as "componentDidMount
useEffect(() => {

    // receiving data from ajax request
    // and set the state as the example object provided earlier
    setColleagues(response.data);
}, []);

1) 所以对于第一个问题。这是有效的吗？或者我是否需要确保我的 persons 数组 中的每个对象都被解构？

const onAddNewColleague = () => {

    // new colleague, this data would be dynamic
    // but for the sake of this example I'll just hard code it
    const newColleague = {
        name: 'Foo Baz Bar',
        age: 30,
        country: 'Spain',
        interests: [
            { en: 'Cats', es: 'Gatos' }
        ]
    };

    // creates a copy of the state
    // targets the "persons" prop and adds a new array
    // where the new colleague is appended
    const newState = {
        ...colleagues,
        persons: colleagues.concat(newColleague)

    };

    // updates the state
    setColleagues(newState);
};

2) 这感觉不对，因为我最终更新了整个persons 数组，而不是仅更新特定人的interest 数组。

const onAddNewInterest = (personId) => {
    // a new interest
    const newInterest = {
        en: 'Languages', es: 'Idiomas'
    };

    // find the person according to personId
    // and update the interests
    const updatedPersons = colleagues.persons.map(person => {
        if(person.id === personId) {
            return {
                ...person,
                interests: person.interests.concat(newInterest);
            };
        }

        return person;
    });

    // create a copy of the state
    const newState = {
        ...colleagues,
        persons: [...updatedPersons]
    };

    setColleagues(newState);
};

3) 作为第二个示例，这个例子也感觉不对，因为我更新了整个 persons 数组，而实际上我可能只想更改 某个特定人的年龄

const onChangeValue = (personId, key, value) => {

    // find the person
    const updatedPersons = colleagues.persons.map(person => {

        if(person.id === personId) {
            // key, could be age?
            return {
                ...person,
                [key]: value
            };
        }

        return person;
    });

    // create a copy of the state
    const newState = {
        ...colleagues,
        persons: [...updatedPersons]
    };

    setColleagues(newState);
};

4) 这是否有效，或者我是否需要单独销毁我的同事对象的每个部分？

const onChangeOtherValue = (key, value) => {
    // for example changing the value foo

    const newState = {
        ...colleagues,
        [key]: value
    };

    setColleagues(newState);
};

我确实有一种感觉，只有第一个函数的概念是有效的，而其余的都不是。

这可以轻松完成吗，还是我应该使用不可变的帮助器？

提前致谢!

更新了示例以获取语法，对吧。谢谢瓦莱里。

澄清我在这里真正追求的是处理此类用例的最佳实践。我想确保我的状态以最正确、最有效的方式更新。因此，请随意撕掉我的示例的一部分或编写新的示例 - 我洗耳恭听。没有必要简单地修改我的以适应这篇文章(除非它们实际上证明是好的)。

Answer 1

1)好的

2)

    const updatedPersons = colleagues.persons.map(person => {
        if(person.id === personId) {
            return {
                ...person,
                interests: person.interests.concat({ en: 'Test', es: 'Test' })
            };
        }

        return person;
    });

    const newState = {
        ...colleagues,
        persons: updatedPersons
    };

3)

    const updatedPersons = colleagues.persons.map(person => {

        if(person.id === personId) {
            return {
                ...person,
                [key]: value
            };
        }

        return person;
    });

    // create a copy of the state
    const newState = {
        ...colleagues,
        persons: updatedPersons
    };

4)好的