Блог

У меня есть react mapping, который преобразует массив объектов в их собственный <cards /> . У каждой карты есть своя кнопка, которая открывает <dialog /> . Я пытаюсь передать уникальный идентификатор от каждого объекта к соответствующему компоненту диалога. На данный момент я передаю все идентификаторы в <dialog /> независимо от того, какое диалоговое окно открыто.

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

             {vehicles !== undefined ? vehicles.map(model => (
                <React.Fragment>
                        <Card>
                            <CardActions className={classes.cardActions}>
                                <Button fullWidth color="#333" onClick={this.handleDialog}>
                                    FIND OUT MORE
                            </Button>
                            </CardActions>
                        </Card>

                    <VehicleDialog
                        key={model.id}
                        onClose={this.handleDialog}
                        open={this.state.open}
                        id={model.id} //passes all IDs to this component
                    />
                </React.Fragment>
            ))
                :
                null
            }
  

Мой дескриптор стандартный:

 handleDialog = () => {
    this.setState({ open: !this.state.open });
};
  

Я просмотрел решения, в которых вы передаете идентификатор с помощью onClick, просто не уверен, как затем передать его компоненту. Может быть, есть способ получше?

На самом деле здесь происходит то, что вы рендерите несколько VehicleDialog в цикле. Что вам следует сделать, так это — вывести VehicleDialog из цикла (из map , я имею в виду). И визуализация его после сопоставления. Теперь при нажатии кнопки обратите внимание (на вашем state языке), из model.id которых нужно открыть VehicleDialog .

Итак, давайте сначала изменим ваш обработчик, чтобы он принимал id в качестве аргумента модель. Он возвращает функцию, которая задает state.open и state.modelId . Таким образом, всякий раз, когда ваше диалоговое окно открыто, оно знает, какой идентификатор модели хотел его открыть (из state.ModelID).

 handleDialog = (id) => () => {
    this.setState({ 
        open: !this.state.open,
        modelId: id
    });
};
  

Теперь давайте вырежем диалоговое окно из цикла и изменим onClick реквизиты кнопок, чтобы отразить новое изменение дизайна обработчика. После цикла отобразите одно диалоговое окно:

 {vehicles !== undefined ? vehicles.map(model => (
    <Card>
        <CardActions className={classes.cardActions}>
            <Button fullWidth color="#333" onClick={this.handleDialog(model.id)}>
                FIND OUT MORE
            </Button>
        </CardActions>
    </Card>
)):null
}

<VehicleDialog
    key={model.id}
    onClose={this.handleDialog}
    open={this.state.open}
    id={this.state.modelId}
/>