0

我正在尝试更改GrandChild 类中的输入和Parent 类*中的 Bootstrap Table 。用户将更改 **GrandChild 类中的输入，然后将其保存，因此更改可以在Parent 类的 Bootstrap 表中看到；但是，在调用 .onChange （这是我的保存）之前，我看到了这种奇怪的行为，我的道具正在发生变化。我相信这会导致我的输入无法正确保存或设置状态。

向下传递的数据：GrandParent => Parent => Child => GrandChild

它发生在Child 类的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>


        );

    }

}

然后Parent 类的 this.props.onChange*被发送到GrandParent Class：

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>
)
}

这是GrandChild 的课程：

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 相同。

4

1 回答 1

0

看起来主要问题是您正在改变状态/道具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

基本上：如果您在 state 中设置 props，然后更新 state 并将 props 传递给孩子，那么您传递的数据将是陈旧的。看起来你在这里没有这样做，但很容易错过。避免这种情况的一个简单方法是命名您计划在 state 中设置的任何 propsinitialProp如果您的 prop 被命名initialData，那么很明显，从树中的那一点开始，您应该依赖 state 中的值而不是 props。

此外，handleChangeinGrandparent可以更简单地写成：

    handleChange = (name, value) => {
      this.setState(prevState => ({
        data: {
          ...prevState.data,
          [name]: value
        }
      }))
    };
于 2019-06-11T02:15:26.983 回答