Question

export class FruitShopPage extends Component {
    constructor(props) {
        super(props)

        this.state = {
          getFruitCode: ''
        }
        this.toggle = this.toggle.bind(this);
    }

    toggle() {
        alert("Get Updated value of data::",this.state.getFruitCode);
    }

    render() {
        const columns = [
            {
                Header: 'Sr.No',
                id: "row",
                maxWidth: 50,
                Cell: (row) => {
                    return <div>{row.index + 1}</div>
                }
            },
            {
                Header: 'Fruit Code',
                accessor: 'fruitCode'
            }
        ];

        const onRowClick = (state, rowInfo, column, instance) => {
            return {
                onClick: e => {
                    let fruitCodeValue = JSON.parse(JSON.stringify(rowInfo.original)).fruitCode;
                    this.setState({
                        getFruitCode: fruitCodeValue,

                    });
                  }
                }
            }
            return (
                <div>
                    <Button onClick={this.toggle}>Fruit Shop</Button>
                    <Modal isOpen={this.state.collapse} size="lg">
                        <ModalHeader>Fruit shop</ModalHeader>
                        <ModalBody>
                            <div className="form-group">
                                <div>
                                    <ReactTable
                                        data={this.state.listFruitsData}
                                        columns={columns}
                                        defaultPageSize={10}
                                        getTrProps={onRowClick}
                                    />
                                </div>
                                <div>
                                    <Row>
                                            <Button type="submit" onClick= 
                                             {this.toggle}>Buy</Button>

                                    </Row>
                                </div>
                            </div>
                        </ModalBody>
                    </Modal>
                </div>
            )
      }
}

在上面的代码中，我想在函数toggle（我正在使用警报显示）中访问getFruitCode（状态中存在）的更新值

场景：

我正在使用React Table，在其中填充帖子中的数据请求
当我单击表的任何行时，我正在获取特定的行数据（因为我们正在使用getTrProps = {onRowClick}）
我也在onRowClick中更新getFruitCode的状态值使用setState
现在我想访问此更新后的状态值切换方法中的getFruitCode（当前行值不是上一个值）
我在切换方法中得到了空白变量
如何获取状态中的最新当前变量（getFruitCode）切换方法？

Answer 1

警报功能只有一个参数，因此只需按照以下步骤更改代码

alert("Get Updated value of data::" + this.state.getFruitCode)

如果设置了状态，它应该可以正常工作

Answer 2

您的代码已经可以使用了。只是您为alert输入了错误的代码。

alert(`Get Updated value of data: ${this.state.getFruitCode}`)

就是这样。

无法在“ React.js”中的函数中获取当前状态值

2 个答案: