Question

我试图更改 GrandChild类内的输入和 Parent类*内的Bootstrap表。用户可以在** GrandChild类中更改输入，然后将其保存，以便在 Parent类的Bootstrap表中看到更改；但是，我看到这种奇怪的行为，即在我调用.onChange（这是我的保存）之前，我的道具正在更改。我认为这导致我的输入无法保存或无法正确设置状态。

数据沿层次结构传递：GrandParent =>父=>子=> GrandChild

它发生在子类的 handleSave（） 函数中：

export class Child extends React.Component {
    constructor(props){
        this.state  = {
            data:this.props.data
        }
    }


    handleChange = (name, value) => {
        this.setState((prevState) => {
            let newState = {...prevState};
            newState.data.dataList[0][name] = value;  // data
            return newState;
        });
    };

    handleSave(){
        let dataList = this.state.data.dataList.slice();
        console.log("dataList state-dataList:", dataList);
        console.log("dataList before onChange 2:", this.props.data.dataList); //Same as dataList or this.state.data.dataList
        this.props.onChange("dataList", dataList);
        console.log("dataList onChange 3:", this.props.data.dataList); //Same as dataList or this.state.data.dataList
    }

    render() {
    return (
        <div>
            <GrandChild data={this.state.data} onChange={this.handleChange} />
        </div>
    )
}

子类的 this.props.onChange 被发送回父类：

export class Parent extends React.Component {
    constructor(props) {
        super(props);
        this.handleChange = this.handleChange.bind(this);
    }

    columns = [
      {dataField: '..', text: '...' }, 
      {dataField: '..', text: '...' },  
      {dataField: '..', text: '...' }, 
      {dataField: '..', text: '...'}];


    handleChange = (name, value) => {
        this.props.onChange(name, value);
    };

    render() {
        return (
            <div>
                <BootstrapTable
                    hover
                    condensed={true}
                    bootstrap4={true}
                    keyField={'id'}
                    data={this.props.data.dataList}
                    columns={this.columns}
                />
                <Child data={this.props.data} onChange={this.handleChange} />
            </div>


        );

    }

}

然后父类的this.props.onChange * 发送到 GrandParent类：

export class GrandParent extends React.Component {
constructor(props) {
    super(props);
    this.state = {
        data: {...this.props.location.state.data}
    };
    this.handleChange = this.handleChange.bind(this);
}   

    handleChange = (name, value) => {
        this.setState((prevState) => {
            let newState = {};
            let data = Object.assign({}, prevState.data);
            data[name] = value;
            newState.data = data;
            return newState;
        });
    };


render() {
return (
    <div>
        <Form>
        <Parent data={this.state.data} onChange={this.handleChange} />
        </Form>
    </div>
)
}

这是大孩子的班级：

export class GrandChild extends React.Component {
constructor(props) {
    super(props);
    this.handleInputChange = this.handleInputChange.bind(this);
}   

handleInputChange = (event) => {
    const target = event.target;
    const value = target.type === 'checkbox' ?
        target.checked :
        target.value;
    const name = target.name;
    this.props.onChange(name, value);
};


render() {
return (
    <div>
        <Form.Row>
            <Form.Group as={Col}>
                <Form.Label>Label Name</Form.Label>
                <Form.Control name="labelName" value={this.props.data.[0]labelName || ""} //ignore the index for now
                              onChange={this.handleInputChange}/>
            </Form.Group>
        </Form.Row>
    </div>
)
}
}

我希望dataLists的console.logs（）有所不同；但是，它们甚至在运行 this.props.onChange（“ dataList”，dataList）;

之前，都会给出相同的对象。

由于setState是异步的，因此第三个dataList console.log可能与状态dataList相同。

Answer 1

主要问题在于您正在Child中对状态/道具进行突变：

    handleChange = (name, value) => {
        this.setState((prevState) => {
            // {...prevState} makes a shallow copy of `prevState`
            let newState = {...prevState};
            // Next you're modifying data deep in `newState`,
            // so it's mutating data in the `dataList` array,
            // which updates the source of truth for both props and state.
            newState.data.dataList[0][name] = value;
            return newState;
        });
    };

执行此操作（避免突变）的一种方法如下：

handleChange = (name, value) => {
  this.setState(prevState => ({
    data: {
      ...prevState.data,
      dataList: [
        {
          ...prevState.data.dataList[0],
          [name]: value
        },
        ...prevState.data.dataList.slice(1)
      ]
    }
  }));
};

如果这比您想要的更为冗长，则可以使用immutable-js之类的库。

另一个可能引起错误的问题是将道具复制到状态中。本文提供了一些有关为什么这样不好的解释：https://overreacted.io/writing-resilient-components/#dont-stop-the-data-flow-in-rendering

基本上：如果您将道具设置为状态，然后更新状态并将道具传递给孩子，则您传递的数据将是陈旧的。看起来好像您在这里做的那样，但是很容易错过。避免这种情况的一种简单方法是命名您计划设置为状态initialProp的所有道具如果您的道具被命名为initialData，则很明显，从树上的那一刻起，您应该依靠该值而不是道具。

此外，handleChange中的Grandparent可以写得更简单：

    handleChange = (name, value) => {
      this.setState(prevState => ({
        data: {
          ...prevState.data,
          [name]: value
        }
      }))
    };

为什么在更新状态之前会更新道具？

1 个答案: