在方法 onClick 中设置状态

Question

我正在尝试在一个方法中设置状态，我有一个简单的投票系统（是或否）如果您单击是状态需要是一个字符串 up 如果你点击 No 状态需要是 down

我在合并方法 voteHandler 和 setVote

时遇到问题

这是我的组件：

import React, { useState, useContext } from 'react';
import {AnswerContext} from './AnswerWrapper';

const AnswerItem = (props) => {

    let indexPlus;

    const indexCount = (index) => {
        indexPlus = index;
        return indexPlus;
    }

    const { active, setActive } = useContext(AnswerContext)

    const [vote, setVote] = useState();

    const voteHandler = (e, index) => {
        e.preventDefault();
        setActive(index);
        setVote(""); // this might be "up" or "down"
        // I am sending this to a parent component
        props.onVote ({
            vote : vote,
            answerID : index
        })
    }

    return (
        <div>
            <button onClick={(e) => voteHandler(e, props.index)}>Yes <span>({props.ups !== null ? props.ups : 0 })</span></button>
            <button onClick={(e) => voteHandler(e, props.index)}>No <span>({props.downs !== null ? props.downs : 0 })</span></button>
        </div>
    )
}

export default AnswerItem;

Answer 1

绑定onClick时可以发送值:

<button onClick={(e) => voteHandler(e, props.index, 'up')}>Yes <span>({props.ups !== null ? props.ups : 0 })</span></button>
<button onClick={(e) => voteHandler(e, props.index, 'down')}>No <span>({props.downs !== null ? props.downs : 0 })</span></button>

并在您的 voteHandler:

中使用它

    const voteHandler = (e, index, value) => {
        e.preventDefault();
        setActive(index);
        setVote(value); // this might be "up" or "down"
        // I am sending this to a parent component
        props.onVote ({
            vote : vote,
            answerID : index
        })
    }

警告

当你这样做时：

        setVote(value); // this might be "up" or "down"
        // I am sending this to a parent component
        props.onVote ({
            vote : vote,
            answerID : index
        })

您不会获得更新后的 vote，因为 setState 是异步的。如果您想在每次 vote 和 active 更改时调用 props.onVote，请使用 useEffect:

const AnswerItem = (props) => {

    let indexPlus;

    const indexCount = (index) => {
        indexPlus = index;
        return indexPlus;
    }

    const { active, setActive } = useContext(AnswerContext)

    const [vote, setVote] = useState();
   
    useEffect(() => {
        props.onVote ({
            vote : vote,
            answerID : active
        })
    }, [vote, active])

    const voteHandler = (e, index) => {
        e.preventDefault();
        setActive(index);
        setVote("");
    }

    return (
        <div>
            <button onClick={(e) => voteHandler(e, props.index)}>Yes <span>({props.ups !== null ? props.ups : 0 })</span></button>
            <button onClick={(e) => voteHandler(e, props.index)}>No <span>({props.downs !== null ? props.downs : 0 })</span></button>
        </div>
    )
}

在方法 onClick 中设置状态

Set State inside method onClick

javascript

frontend

reactjs

警告