react父组件引用了子组件多次，怎么让传入子组件的props保持独立

Question

假如我有这样一个组件

import React, {Component} from 'react';

class InputTest extends Component {
    constructor(props) {
        super(props);

        this.state = {
            fillok: true
        };
    }

    render() {
        return (
            <input />
        );
    }
}

export default InputTest;

我在一个组件中引用了多次上面的组件

import React, {Component} from 'react';

class componentName extends Component {
    render() {
        return (
            <div>
                <InputTest {...this.state} />
                <InputTest {...this.state} />
            </div>
        );
    }
}

export default componentName;

我想知道在父组件中通过props的形式给组件传递state 怎么让子组件中获取的props是独立的，他们之间互不影响。

我在这里遇到的情况是，在其中一个InputTest组件中操作state会影响另外一个InputTest的state

另外再补充一个问题。this.setState的更新是异步的。父组件按照{...this.state}传入子组件的props难到拿到的值也是异步的么。（我的意思就是子组件通过props拿到的值是不是父组件已经更新完的值）？

Answer 1

就算引用多次子组件，但是传给子组件的值也不是同一个吧？你这样是把父组件的所有state都传给了子组件，他们拿到的都是一样的东西，那显示出来能不是一样的吗 ？ 就像一个函数，每次都是传递一样的参数进去，返回的不都是一样的吗？
想要不被影响那么

<InputTest {...this.state.a} />
<InputTest {...this.state.b} />

就是不能把同一个值传递进去

Answer 2

1.一种方式是在子组件的构造函数里把props用state缓存起来，这样的话会导致父组件的属性更新了，子组件没有更新，这个时候需要结合componentWillRecieveProps函数处理
2.把父组件传给子组件的属性分开，各个子组件的属性相互独立