React의 중첩 된 구성 요소를 통해 데이터 전달

내 제안은 onChange 핸들러를 아웃소싱하는 것이며 코드를 조금 더 쉽게 이해할 수 있다는 것입니다.

주로 React setState()는 호출 직후 상태를 업데이트하지 않고 일괄 작업을 수행합니다. 따라서 여러 setState호출이 하나의 참조 지점에 액세스 할 수 있습니다 . 상태를 직접 변경하면 배치 작업을 수행하는 동안 다른 상태가 업데이트 된 상태를 사용할 수 있으므로 혼돈을 일으킬 수 있습니다.

또한 앱 수준에서 onChange 핸들러를 소싱하는 경우 MetafieldInputs를 클래스 기반 구성 요소가 아닌 기능 구성 요소로 변경할 수 있습니다. 기능 기반 구성 요소는 클래스 기반 구성 요소보다 비용이 적게 들고 성능을 높일 수 있습니다.

아래는 테스트 된 업데이트 된 코드입니다. Material UI의 TextField를 사용한다고 가정하지만 onChangeHandler는 자체 구성 요소에서도 작동해야합니다.

// Full App.js
import React, { Component } from 'react';
import MetafieldInputs from './MetafieldInputs';

class App extends Component {
    state = {
        metafields: [
            {
                metafield:
                {
                    namespace: "namespaceVal",
                    key: "keyVal",
                    val: [
                        { '0': "val1" },
                        { '1': "val2" },
                        { '2': "val3" }
                    ]
                }
            },
        ]
    }

    // will never be triggered as from React point of view, the state never changes
    componentDidUpdate() {
        console.log('componentDidUpdate')
    }

    render() {
        const metafields = this.state.metafields;
        const metafieldsKeys = Object.keys(metafields);
        const renderInputs = metafieldsKeys.map(key => {
            const metafield = metafields[key];
            return <MetafieldInputs metafields={metafield.metafield.val} key={metafield.metafield.key} />;
        })
        return (
            <div>
                {renderInputs}
            </div>
        )
    }
}

export default App;

// full MetafieldInputs
import React, { Component } from 'react'
import TextField from '@material-ui/core/TextField';

class MetafieldInputs extends Component {
    state = {
        metafields: this.props.metafields
    }

    onChangeHandler = (e, index) => {
        const value = e.target.value;
        this.setState(prevState => {
            const updateMetafields = [...prevState.metafields];
            const updatedFields = { ...updateMetafields[index] }
            updatedFields[index] = value
            updateMetafields[index] = updatedFields;
            return { metafields: updateMetafields }
        })
    }

    render() {
        const { metafields } = this.state;
        // will always remain the same
        console.log('this.props', this.props)
        return (
            <div>
                {metafields.map((meta, i) => {
                    return (
                        <TextField
                            value={meta[i]}
                            changekey={meta}
                            onChange={(e) => this.onChangeHandler(e, i)}
                            // generally it is not a good idea to use index as a key.
                            key={i}
                        />
                    )
                }
                )}
            </div>
        )
    }
}

export default MetafieldInputs

다시 말하지만, onChangeHandlerto App클래스를 아웃소싱하면 MetafieldInputs순수한 기능적 구성 요소가 될 수 있으며 모든 상태 관리는 App클래스 에서 수행 될 수 있습니다 .

반면에 순수하고 깨끗한 App클래스 를 유지하려면 응용 프로그램에 다른 논리가 필요할 수있는 경우에 대비하여 MetafieldInputs 클래스에 메타 필드를 저장할 수도 있습니다.

예를 들어, 애플리케이션은 예제보다 더 많은 구성 요소를 렌더링하며 MetafieldInputs는 어떤 일이 발생할 때까지 렌더링되지 않아야합니다. 서버 측에서 데이터를 가져 오는 경우 앱 구성 요소의 모든 데이터를 가져 오는 것보다 필요할 때 데이터를 가져 오는 것이 좋습니다.