javascript - React Issue - 子状态更改父状态

Question

问题:

如果每个组件都有自己的状态，那么这件事情是怎么发生的，怎么可能 child 正在改变 parent 的状态？

---

这是我的应用的完整代码:

import React, { Component } from 'react';
import { render } from 'react-dom';
import AutoComplete from 'material-ui/AutoComplete';
import Chip from 'material-ui/Chip';
import Hello from './Hello';
import './style.css';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';

class App extends Component {
  constructor() {
    super();
    const vehicles = [{value : 1 , label : 'Vehicle 1'},{value : 2 , label : 'Vehicle 2'},{value : 3 , label : 'Vehicle 3'},{value : 4 , label : 'Vehicle 4'},{value : 5 , label : 'Vehicle 5'},{value : 6 , label : 'Vehicle 6'},{value : 7 , label : 'Vehicle 7'},{value : 8 , label : 'Vehicle 8'}];
    this.state = {
      vehicles,
      name: 'React',
      name1: 'React1',
      name2: 'React2'
    };
  }

  render() {
    const dataSourceConfig = {
            text: 'label',
            value: 'value',
        };
    return (
      <div>
      <MuiThemeProvider>
            <div>
              <AutoCompleteHlpr 
              dataSource={this.state.vehicles} 
              dataSourceConfig={dataSourceConfig}
              floatingLabelText='Select Vehicles'
              selectedOption={this.handleSelectedVehicle}/>

              <AutoCompleteHlpr 
              dataSource={this.state.vehicles} 
              dataSourceConfig={dataSourceConfig}
              floatingLabelText='Select Vehicles'
              selectedOption={this.handleSelectedVehicle}/>

              <AutoCompleteHlpr 
              dataSource={this.state.vehicles} 
              dataSourceConfig={dataSourceConfig}
              floatingLabelText='Select Vehicles'
              selectedOption={this.handleSelectedVehicle}/>
            </div>
      </MuiThemeProvider>
        <Hello name={this.state.name} />
        <p>
          Start editing to see some magic happen :)
        </p>
      </div>
    );
  }
}




export class AutoCompleteHlpr extends React.Component {

    constructor(props) {
        super(props);
        this.state = {dataSource : this.props.dataSource , searchText : ''};

        this.styles = {
            chip: {
                margin: 4,
            },
            wrapper: {
                display: 'flex',
                flexWrap: 'wrap',
            },
        };

        this.handleNewRequest = this.handleNewRequest.bind(this);
        this.getDataSource = this.getDataSource.bind(this);
        console.log(this.state);
    }

    handleNewRequest(searchText , index){
        this.state.dataSource[index]['selected'] = true;
        this.setState({dataSource : this.state.dataSource , searchText : '' });
        this.props.selectedOption(this.state.dataSource[index] , this.state.dataSource);
    }

    renderChip(data , index) {
        if(data.selected) {
            var value = this.props.dataSourceConfig.text ? this.props.dataSourceConfig.text : 'text';
            var key = this.props.dataSourceConfig.value ? this.props.dataSourceConfig.value : 'value';
            return (
                <Chip
                    key={data[key]}
                    style={this.styles.chip}
                    onRequestDelete={() => this.handleRequestDelete(index)} >
                    {data[value]}

                </Chip>
            );
        }
    }

    handleRequestDelete(index) {
        this.state.dataSource[index]['selected'] = false;
        this.setState({dataSource : this.state.dataSource , searchText : '' });
        this.props.selectedOption(this.state.dataSource[index] , this.state.dataSource);
    }

    componentWillReceiveProps(nextProps) {
        if(this.props.dataSource !== nextProps.dataSource) {
            this.setState({ dataSource : nextProps.dataSource });
        }
    }

    getDataSource() {
        return this.state.dataSource.map(data => {
            if(!data.selected) {
                return data
            }
        })
    }

    render() {
        return(
            <div>
                <AutoComplete
                    floatingLabelText={this.props.floatingLabelText}
                    filter={AutoComplete.caseInsensitiveFilter}
                    onNewRequest={this.handleNewRequest}
                    searchText={this.state.searchText}
                    dataSource={this.getDataSource()}
                    dataSourceConfig={this.props.dataSourceConfig}
                    openOnFocus={true}
                />
                <div style={this.styles.wrapper}>
                    {this.state.dataSource.map(this.renderChip, this)}
                </div>
            </div>
        )
    }
}

AutoCompleteHlpr.defaultProps = {
    floatingLabelText : 'Type Something',
    dataSource : [],
    dataSourceConfig : {},
    selectedOption: () => { }
};

render(<App />, document.getElementById('root'));

---

这是 stackblitz(在线工作代码)的链接:

https://stackblitz.com/edit/react-svqwcg

---

如何生成问题:

1. 从第一个文本框中选择“车辆 1”
2. 从第二个文本框中选择“车辆 2”
3. 从第三个文本框中选择“车辆 3”

你会明白的。

Answer 1

您的问题是在子组件中您正在改变父状态。当您更改 vehicles 数组中项目的 selected 属性时，它会在线上发生:

this.state.dataSource[index]['selected'] = true;

突变会传播到所有 AutoCompleteHlpr 组件，因为您将同一个数组传递给所有组件。您造成的情况实际上是所有 AutoCompleteHlpr 组件都有一个全局状态。

要解决这个问题，您需要传递 vehicles 数组的克隆，这样更改克隆对象的 Prop 将不会影响原始对象。下面是简单的克隆实现，但您可以使用来自 lodash 等的另一个实现:

const clone = (arg) => JSON.parse(JSON.stringify(arg));

在您的代码中，您可以这样使用它:

<AutoCompleteHlpr 
          dataSource={clone(this.state.vehicles)} 
          dataSourceConfig={dataSourceConfig}
          floatingLabelText='Select Vehicles'
          selectedOption={this.handleSelectedVehicle}/>

另一种选择是，不要像

那样改变 selected

this.state.dataSource[index]['selected'] = true;

你可以这样做:

const newDataSource = this.state.dataSource.reduce((ds, item, idx) => index !== idx
   ? ds.concat(item)
   : ds.concat(Object.assign({}, item, { selected: true })), []);
this.setState({ dataSource: newDataSource, searchText: '' }); 

---

编辑:看看下面的代码片段，看看为什么传递 [...this.state.vehicle] 不起作用:

const vehicles = [{value : 1 , label : 'Vehicle 1'},{value : 2 , label : 'Vehicle 2'},{value : 3 , label : 'Vehicle 3'},{value : 4 , label : 'Vehicle 4'},{value : 5 , label : 'Vehicle 5'},{value : 6 , label : 'Vehicle 6'},{value : 7 , label : 'Vehicle 7'},{value : 8 , label : 'Vehicle 8'}];

const vehicles2 = [...vehicles];
console.log(vehicles === vehicles2);
console.log(vehicles[0] === vehicles2[0]);
console.log(vehicles.every((item, idx) => item === vehicles2[idx]))

如您所见，vehicle 和 vehicle2 是不同的数组，但它们的项是对相同对象的引用!这就是您需要深度克隆的原因。