UserProvider.js文件中 {...form, [fieldName]: newFieldState};怎么理解？

Question

const newForm = {...form, [fieldName]: newFieldState};
和
const formValid = Object.values(newForm).every(f => f.valid);
这两行代码怎么理解？

UserProvider.js

import React from 'react';
/*
{
    name: {
        defaultValue: '王子'
    },
    age: {
        defaultValue: 0
    },
    gender: {
        defaultValue: '男'
    }
}
 */
function userProvider (fields) {
    return function (Comp) {

        const initialFormState = {};
        for (const key in fields) {
            initialFormState[key] = {
                value: fields[key].defaultValue,
                error: ''
            };
        }
        /*
         initialFormState = {
            name: {
                value: '王子',
                error: ''
            }
         }
         */

        class UserComponent extends React.Component {
            constructor (props) {
                super(props);
                this.state = {
                    form: initialFormState,
                    formValid: false
                };
                console.log('初始化的状态')
                console.log(initialFormState)


            }

            handleValueChange (fieldName, value) {
                const { form } = this.state;

                // var form = this.state.form;
                console.log('form');
                console.log(form);

                const newFieldState = {value, valid: true, error: ''};

                console.log('fieldName');
                console.log(fieldName);

                console.log('newFieldState');
                console.log(newFieldState);

                const newForm = {...form, [fieldName]: newFieldState};

                console.log('newForm')
                console.log(newForm)

                const formValid = Object.values(newForm).every(f => f.valid);

                this.setState({
                    form: newForm,
                    formValid
                });
            }

            render () {
                const {form, formValid} = this.state;
                return (
                    <Comp
                        {...this.props}
                        form={form}
                        onFormChange={this.handleValueChange.bind(this)}
                    />
                )
            }
        }

        return UserComponent;
    }
}

export default userProvider;

UserAdd.js

import React from 'react';
import UserProvider from './UserProvider';

class UserAdd extends React.Component {
    handleSubmit (e) {
        e.preventDefault();

        const {form: {name, age, gender}, formValid} = this.props;


    }
    render () {
        const {form: {name, age, gender}, onFormChange} = this.props;
        return (
            <div>
                <header>
                    <h1>添加用户</h1>
                </header>

                <main>
                    <form onSubmit={(e) => this.handleSubmit(e)}>
                        <label>用户名：</label>
                        <input
                            type="text"
                            value={name.value}
                            onChange={(e) => onFormChange('name', e.target.value)}
                        />
                        <br/>
                        <label>年龄：</label>
                        <input
                            type="number"
                            value={age.value || ''}
                            onChange={(e) => onFormChange('age', +e.target.value)}
                        />
                        <br/>
                        <label>性别：</label>
                        <select
                            value={gender.value}
                            onChange={(e) => onFormChange('gender', e.target.value)}
                        >
                            <option value="">请选择</option>
                            <option value="male">男</option>
                            <option value="female">女</option>
                        </select>
                        <br/>
                        <br/>
                        <input type="submit" value="提交"/>
                    </form>
                </main>
            </div>
        )

    }
}

UserAdd = UserProvider({
    name: {
        defaultValue: '王子'
    },
    age: {
        defaultValue: 0
    },
    gender: {
        defaultValue: '男'
    }
})(UserAdd);

export default UserAdd;

Answer 1

这些都是 ES6 中 解构 和 拓展运算符(...) 的一些知识，看我写的这个小栗子就知道什么作用了。

关于结构可以去学习一下，自己谷歌搜索一下 ES6 的解构 和 拓展运算符，一堆教程。

扩展运算符（ spread ）是三个点（...）。它好比 rest 参数的逆运算，将一个数组转为用逗号分隔的参数序列。

console.log(...[1, 2, 3])
// 1 2 3
console.log(1, ...[2, 3, 4], 5)
// 1 2 3 4 5
[...document.querySelectorAll('div')]
// [<div>, <div>, <div>]

拓展运算符(...) 用于操作数组，有两种层面

1. 第一个叫做 展开运算符(spread operator)，作用是和字面意思一样，就是把东西展开。可以用在 array 和 object 上都行。

比如:

let a = [1,2,3];
let b = [0, ...a, 4]; // [0,1,2,3,4]

let obj = { a: 1, b: 2 };
let obj2 = { ...obj, c: 3 }; // { a:1, b:2, c:3 }
let obj3 = { ...obj, a: 3 }; // { a:3, b:2 }

1. 第二个，第三个叫做 剩余操作符(rest operator)，是解构的一种，意思就是把剩余的东西放到一个array里面赋值给它。一般只针对array的解构，其他的没见过。。。

比如：

let a = [1,2,3];
let [b, ...c] = a;
b; // 1
c; // [2,3]

// 也可以
let a = [1,2,3];
let [b, ...[c,d,e]] = a;
b; // 1
c; // 2
d; // 3
e; // undefined

// 也可以
function test(a, ...rest){
  console.log(a); // 1
  console.log(rest); // [2,3]
}

test(1,2,3)

还有类似的

let array = [1, 2, 3, 4, 5];
const { x, y, ...z } = array;
// 其中z=[3, 4, 5]，注意如果由于array的length不足以完成析构，则会导致z为[]
对象：
let obj = { name: 'zhangsan', age: 30, city: 'shenzhen' };
const {name, ...others} = obj;
console.log(name); // 'zhangsan'
console.log(others); // {age: 30, city: 'shenzhen'}

Object.keys 和 Object.values 显而易见一个获取对象的 key 值，一个获取对象的 value 值，返回的都是数组。

关于数组的 every 用法，其实也很简单。

对数组中的每个元素都执行一次指定的函数（callback），直到此函数返回 false，如果发现这个元素，every 将返回 false，如果回调函数对每个元素执行后都返回 true ，every 将返回 true。它只对数组中的非空元素执行指定的函数，没有赋值或者已经删除的元素将被忽略

//测试是否所有数组元素都大于等于10：

function isBigEnough(element, index, array) {
    return (element >= 10);
}
var passed = [12, 5, 8, 130, 44].every(isBigEnough);
// passed is false
passed = [12, 54, 18, 130, 44].every(isBigEnough);
// passed is true
//结果：
//[12, 5, 8, 130, 44].every(isBigEnough) 返回 ： false 
//[12, 54, 18, 130, 44].every(isBigEnough) 返回 ： true

小伙子基础要学好啊，这些都是语法基础