Question

所以我有两个组件：输入组件，基本上只是一个按钮，用于将输入值的当前状态设置为活动，然后将值对象发送到其父组件。问：

import React, { useState, useEffect } from 'react';
import './Input.css';

const Input = (props) => {
    // input state:
    const title = props.title;
    const index = props.index;
    const [active, setActive] = useState(false);
    const [inputValue, setInputValue] = useState({index, title, active});

// sets active status based on what status is in Question component
// the logic there would only allow 1 radio input to be active as opposed to checkboxes where we have multiple active
useEffect(() => {
    setActive(props.active);
}, [props.active]);


// stores activity status of single input and re-runs only when 'active' changes (when clicking the button)
useEffect(() => {
    setInputValue({index, title, active});
}, [active]);

// returns updated input value to Question component
useEffect(() => {
    return props.selected(inputValue);
}, [inputValue]);

return (
    <div className='input'>
        <button 
            data-key={title}
            className={props.active ? 'highlight' : ''}
            onClick={() => setActive(active => !active)}
        >
            {title}
        </button>
    </div>
);
}

export default Input;

然后Question会检查当前问题类型（它从另一个父级组件收到的问题）是否是“单选”按钮类型，在这种情况下，您只能有一个选择。所以目前我是这样设置的：

import React, { useState, useEffect } from 'react';
import s from './Question.css';
import Input from './Input/Input';

const Question = (props) => {
    // create intitial state of options
    let initialState = [];
    for (let i=0; i < props.options.length; i++) {
        initialState.push(
            {
                index: i,
                option: props.options[i],
                active: false,
            }
        )
    }

    // question state:
    let questionIndex = props.index;
    let questionActive = props.active;
    let questionTitle = props.question;
    let questionType = props.type;
    let [questionValue, setQuestionValue] = useState(initialState);
    let [isAnswered, setIsAnswered] = useState(false);

    useEffect(() => {
        console.log(questionValue);
    }, [questionValue]);

    // stores currently selected input value for question and handles logic according to type
    const storeInputValue = (inputValue) => {
        let questionInputs = [...questionValue];
        let index = inputValue.index;

        // first set every input value to false when type is radio, with the radio-type you can only choose one option
        if (questionType === 'radio') {
            for (let i=0; i < questionInputs.length; i++) {
                questionInputs[i].active = false;
            }
        }

        questionInputs[index].active = inputValue.active;
        setQuestionValue([...questionInputs]);

        // set state that checks if question has been answered
        questionValue.filter(x => x.active).length > 0 ? setIsAnswered(true) : setIsAnswered(false);
    }

    // creates the correct input type choices for the question
    let inputs = [];
    for (const [index, input] of props.options.entries()) {
        inputs.push(
            <Input
                key={index}
                index={index}
                title={input}
                active={questionValue[index].active}
                selected={storeInputValue}
            />
         );
    }

    // passes current state (selected value) and the index of question to parent (App.js) component
    const saveQuestionValue = (e) => {
        e.preventDefault();
        props.selection(questionValue, questionIndex, questionTitle);
    }

    return (
        <div className={`question ${!questionActive ? 'hide' : ''}`}>
            <h1>{props.question}</h1>
            <div className="inputs">
                {inputs}
            </div>
            <a className={`selectionButton ${isAnswered ? 'highlight' : ''}`} href="" onClick={e => saveQuestionValue(e)}>
                <div>Save and continue -></div>
            </a>
        </div>
    );
}

export default Question;

通过这种设置，当我单击输入时，它会将其发送到Question组件，并且该组件将prop.active返回给Input，从而突出显示输入值。但是，当我单击一个新输入时，它会重新渲染两次，因为它会侦听“输入”中的活动状态，并将所有输入都设置为false。

我的问题是：如何在此代码中将逻辑设置为类似于无线电输入，使其仅将当前选择的输入设置为活动，而不是先将每个输入设置为active = false？

Answer 1

您不应在两个不同的部分中复制状态值。对于处于什么状态的值，应该总是唯一一个真理的唯一来源。这是React最重要的模式之一，甚至在the official documentation中也提到过。

相反，您应该lift shared state up，使其位于“最接近的共同祖先”。您的<Input>组件根本不应该具有任何内部状态-它们应该是纯函数，除了呈现当前值并提供回调以更新所述值外，什么也不做。但是，他们不会自己存储该值-它会作为道具传递给他们。

所有输入处于活动状态且具有什么值的逻辑都应存在于父组件中，并从那里传递下来。每当您在子组件中设置状态，然后以某种方式将该状态传递回父级时，都会发出警告标记，因为在React the data should flow down中。

React Hooks：设置组件状态而无需重新渲染两次

1 个答案: