javascript - Prop 在异常情况下丢失

Question

我正在尝试将 Prop 从我的父组件传递到我的子组件。当我在 componentWillReceiveProps() 中收到 props 时，我的 coin prop 的子代之一丢失了。这可以通过子组件中的 console.log 行看到。

出于某种原因，coin.profit 打印“undefined”，而仅打印 coin 对象表明 coin.profit 确实在 coin 对象中。我已经检查了我的代码几个小时了，并要求 friend 查看它但无济于事。任何帮助将不胜感激。

子组件(https://github.com/kdelalic/cryptofolio/blob/master/src/js/progress.js):

class Progress extends Component {

constructor(props) {
    super(props);

    this.state = {
        initial: 0,
        profit: 0,
        holdings: 0,
        change: "0%"
    };
}

componentWillReceiveProps(nextProps) {
    if (nextProps.coins !== this.props.coins) {
        Object.keys(nextProps.coins).map((key) => {
            const coin = nextProps.coins[key]
            console.log(coin)
            console.log(coin.price)
            console.log(coin.profit)
            this.setState({
                initial: this.state.initial + coin.price * coin.amount,
                profit: this.state.profit,
                holdings: this.state.profit + this.state.holdings,
                change: this.state.initial / this.state.profit * 100 + "%",
            })
        })
    }
}

父组件(https://github.com/kdelalic/cryptofolio/blob/master/src/js/crypto.js):

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

    this.state = {
        open: false,
    };
}

getCurrentPrice = (key) => {
    const { coins } = this.state;
    var url = "https://min-api.cryptocompare.com/data/price?fsym=" + coins[key].value.substring(coins[key].value.indexOf("(")+1,coins[key].value.indexOf(")")).toUpperCase() + "&tsyms=" + coins[key].currency.toUpperCase();
    axios.get(url)
        .then(response => {
            const price = response.data[coins[key].currency.toUpperCase()];
            const profit = parseFloat((price - coins[key].price) * coins[key].amount).toFixed(2)

            var newState = this.state;
            newState.coins[key]["currentPrice"] = price;
            newState.coins[key]["profit"] = profit;
            this.setState(newState);
        })
        .catch(err => {               
            console.log(err)
        });     
};

checkPos = (num) => {
    if (num > 0) {
        return " positive"
    } else if (num < 0) {
        return " negative"
    } else {
        return ""
    }
};

handleOpen = () => {
  this.setState({ ...this.state, open: true });
};

handleClose = () => {
  this.setState({ ...this.state, open: false });
};

coinData = (dataFromChild, key) => {
    const newCoins = {
        ...this.state.coins
    };
    newCoins[key] = dataFromChild
    this.setState({
        ...this.state,
        coins: newCoins
    }, () => {
        this.getCurrentPrice(key);
        this.setState({
            ...this.state,
        })
        this.handleClose();
    })
};

render() {
    const { coins } = this.state;
    return (
        <div className="crypto">
            <Progress coins={this.state.coins}/>

Answer 1

在 React 中，你永远不应该改变现有状态。在

var newState = this.state;
newState.coins[key]["currentPrice"] = price;
newState.coins[key]["profit"] = profit;
this.setState(newState);

你永远不会创建任何新对象。你应该这样做

this.setState({
  ...this.state,
  coins: {
    ...this.state.coins,
    [key]: {
      ...this.state.coins[key],
      currentPrice: price,
      profit,
    },
  },
});

为您正在改变的每个项目创建新的状态对象。

因为您正在修改现有对象，意味着传递给 componentWillReceiveProps 的对象可能会被您的其他代码更新。