Question

我的权益组件在父类组件中渲染了 4 次。我试图将 valueNewStake 作为 prop 传递给其父组件，并将所有输入分组到一个公共数组中（请参阅 allStakes）。出于某种原因，我无法更改状态，而且 dom 也不会呈现组件旁边的按钮。任何人都可以解释我为什么会发生这种情况，因为我是 React 新手。谢谢

import React, { Component } from 'react';
import Stake from './stake';

class FetchRandomBet extends Component {
    constructor(props) {
        super(props);
        this.state = {
            loading: true,
            bet: null,
            value: this.props.value,
            allStakes: ['']
        };
    }

    async componentDidMount() {
        const url = "http://localhost:4000/";
        const response = await fetch(url);
        const data = await response.json();

        this.setState({
            loading: false,
            bet: data.bets,
        });
    }

    render() {
        const { valueProp: value } = this.props;
        const { bet, loading } = this.state;

        if (loading) {
            return <div>loading..</div>;
        }
        if (!bet) {
            return <div>did not get data</div>;
        }
        return (
            < div >
                {
                    loading || !bet ? (
                        <div>loading..</div>
                    ) : value === 0 ? (
                        <div className="bet-list">
                            <ol>
                                <p>NAME</p>
                                {
                                    bet.map(post => (
                                        <li key={post.id}>
                                            {post.name}
                                        </li>
                                    ))
                                }
                            </ol>
                            <ul>
                                <p>ODDS</p>
                                {
                                    bet.map(post => (
                                        <li key={post.id}>
                                            {post.odds[4].oddsDecimal}
                                            <div className="stake-margin">
                                                <Stake
                                                    allStakes={this.props.valueNewStake}
                                                    onChange={() => { this.setState({ allStakes: [...this.props.valueNewStake] }) }}
                                                >
                                                    <button>ok</button>
                                                </Stake>
                                            </div>
                                        </li>
                                    ))
                                }
                            </ul>
                        </div>

import React, { useState } from 'react';
import CurrencyInput from 'react-currency-input-field';

function Stake() {
    const [newStake, setStake] = useState(['']);

    const changeStake = (e) => {
        setStake(e.target.value)
    }
    return (
        <>
            <CurrencyInput
                onChange={changeStake}
                valueNewStake={newStake}
                style={{
                    marginLeft: "40px",
                    width: "50px"
                }}
                placeholder="Stake"
                decimalScale={2}
                prefix="£"
            />
            {newStake}
        </>
    );
}

export default Stake;

Answer 1

您没有将 props 传递给 Stake 组件

function Stake({ allStakes, onChange }) {
    // do something with your props here
    const [newStake, setStake] = useState(['']);

    const changeStake = (e) => {
        onChange()
        setStake(e.target.value)
    }

    return (
        <>
            <CurrencyInput
                onChange={changeStake}
                valueNewStake={newStake}
                style={{
                    marginLeft: "40px",
                    width: "50px"
                }}
                placeholder="Stake"
                decimalScale={2}
                prefix="£"
            />
            {newStake}
        </>
    );
}

我无法更改状态并传递道具

1 个答案: