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

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('初始化的狀態(tài)')
                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;

回答

編輯回答

刮刮樂

這些都是 ES6 中 解構(gòu) 和 拓展運算符(...) 的一些知識，看我寫的這個小栗子就知道什么作用了。

關(guān)于結(jié)構(gòu)可以去學習一下，自己谷歌搜索一下 ES6 的解構(gòu) 和拓展運算符，一堆教程。

擴展運算符（ spread ）是三個點（...）。它好比 rest 參數(shù)的逆運算，將一個數(shù)組轉(zhuǎn)為用逗號分隔的參數(shù)序列。

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>]

拓展運算符(...) 用于操作數(shù)組，有兩種層面

第一個叫做展開運算符(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 }

第二個，第三個叫做剩余操作符(rest operator)，是解構(gòu)的一種，意思就是把剩余的東西放到一個array里面賦值給它。一般只針對array的解構(gòu)，其他的沒見過。。。

比如：

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不足以完成析構(gòu)，則會導致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 值，返回的都是數(shù)組。

關(guān)于數(shù)組的 every 用法，其實也很簡單。

對數(shù)組中的每個元素都執(zhí)行一次指定的函數(shù)（callback），直到此函數(shù)返回 false，如果發(fā)現(xiàn)這個元素，every 將返回 false，如果回調(diào)函數(shù)對每個元素執(zhí)行后都返回 true ，every 將返回 true。它只對數(shù)組中的非空元素執(zhí)行指定的函數(shù)，沒有賦值或者已經(jīng)刪除的元素將被忽略


//測試是否所有數(shù)組元素都大于等于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
//結(jié)果：
//[12, 5, 8, 130, 44].every(isBigEnough) 返回 ： false 
//[12, 54, 18, 130, 44].every(isBigEnough) 返回 ： true

小伙子基礎(chǔ)要學好啊，這些都是語法基礎(chǔ)

2017年10月27日 09:10