Реагировать не обновляется вложенный компонент с изменением реквизита?

Joren спросил: 07 октября 2018 в 11:24 в: reactjs

Это часто встречающаяся проблема, но я, похоже, не сталкиваюсь с распространенными ошибками (насколько я могу судить).

У меня есть основной компонент, который контролирует все состояния. У него есть метод, который передается в качестве подпорки его дочернему компоненту для обновления его состояния, которое выглядит следующим образом:

changeAttackerAI = (target, index) => {
    this.setState(update(this.state.attackers,
        {
            [index]: {$set: {'ai': {[target.name]: target.value}}},
        }
    ))
}

Под этим родительским компонентом у меня есть другой, который существует только для цикла через и вывести список. Выглядит это так:

class Attackers extends Component {
    render() {
        return (
            <div className="attackers">
                {this.props.models.map((model, index) => {
                    console.log(model)
                    return <Attacker key={index}
                                index={index}
                                modelData={model}
                                removeAttacker={this.props.removeAttacker}
                                reorderAttackers={this.props.reorderAttackers}
                                changeAttackerAI={this.props.changeAttackerAI}
                            />
                })}
            </div>
        );
    }
}

Когда вызывается changeAttackerAI, запускается этот console.log, и мои обновленные данные доступны.

И, наконец, у меня есть компонент, который отказывается обновлять. Его функция рендеринга никогда не вызывается после начального рендеринга, а componentWillReceiveProps или аналогичный никогда не вызывается. Выглядит примерно так:

class Attacker extends Component {    removeAttacker = () => {
        this.props.removeAttacker(this.props.index)
    }    changeAttackerAI = (e) => {
        this.props.changeAttackerAI(e.target, this.props.index)
    }    radioButtonOption = (name, value, label) => {
        const existingValue = _.get(this.props.modelData, 'ai.' + name, null)
        return <label><input type="radio" name={name} checked={existingValue === value} value={value} onChange={this.changeAttackerAI} /> {label}</label>
    }    render() {
        const {isDragging, connectDragSource, connectDropTarget, modelData} = this.props        console.log(modelData)        const opacity = isDragging ? 0 : 1        return connectDragSource(connectDropTarget(
            <div className="attacker" style={{'opacity': opacity}}>
                {modelData.modelName}
                <button onClick={this.removeAttacker}>x</button>
                <div className="boost_hit">
                    <h3>Boost Hit</h3>
                    {this.radioButtonOption('boost_hit', 'none', 'None')}
                    {this.radioButtonOption('boost_hit', 'all', 'All')}
                    {this.radioButtonOption('boost_hit', 'initials', 'Initials')}
                    {this.radioButtonOption('boost_hit', 'chain_attack', 'Chain Attack')}
                    <label><input type="checkbox" name="free_hit_boosts" value="1" onChange={this.changeAttackerAI} /> Free boosts?</label>
                </div>
                <div className="boost_damage">
                    <h3>Boost Damage</h3>
                    {this.radioButtonOption('boost_damage', 'none', 'None')}
                    {this.radioButtonOption('boost_damage', 'all', 'All')}
                    {this.radioButtonOption('boost_damage', 'initials', 'Initials')}
                    {this.radioButtonOption('boost_damage', 'chain_attack', 'Chain Attack')}
                    <label><input type="checkbox" name="free_damage_boosts" value="1" onChange={this.changeAttackerAI} /> Free boosts?</label>
                </div>
            </div>
        ));
    }
}

Что я здесь не так делаю?

0 ответов