React：コンテナの状態を機能コンポーネント内から設定する

Question

したがって、他のJSXと一緒に機能コンポーネントをレンダリングするコンテナコンポーネントがあります。私はそのコンテナ内の状態を、その機能コンポーネントの内部から発生しているボタンクリックから変更しようとしています。しかし、私はまだこれに取り組んで良い記事を見つけていないと私はthis.setState() is not a functionの問題にぶつかるか、またはtrigger a setState call during a render（多かれ少なかれ）にしようとすることによって、現在のタブを完全に破る。ここで

は、私が何を意味するか説明するためにいくつかのサンプルコードです：

class TestComponent extends Component { 
    render() { 
    <div> 
     <FunctionalComponent close={(type) => this.setState({ property: type })} /> 
    </div> 
    } 
}; 

機能性成分：

は、コンテナ内の別の関数を作成し、そこからthis.setState()を呼び出してみました

const FunctionalComponent = (props) => { 
    return (
    <button onClick={props.close('stringvalue')}>Click to setState</button> 
); 
}; 

が、問題は続く。これは文脈の問題ですか？

Answer 1

もう少し慣用句。 。 。

class TestComponent extends Component { 
    constructor(props) { 
    super(props); 
    this.onClose = this.onClose.bind(this); 
    } 

    onClose(property) { 
    this.setState({ property }) 
    } 

    render() { 
    return (
     <div> 
     <FunctionalComponent close={this.onClose} /> 
     </div> 
    ) 
    } 
}; 

const FunctionalComponent = ({ close }) => { 
    return (
    <button onClick={close.bind(null, 'stringvalue')}>Click to setState</button> 
); 
}; 

Answer 2

私は、関数を渡すのではなく呼び出しているので、あなたのprops.close関数が各レンダリングで呼び出されることが問題だと思います。

onClickには、機能が必要です。

const FunctionalComponent = (props) => { 
    function onClick() { 
    props.close('stringvalue'); 
    } 
    return (
    <button onClick={onClick}>Click to setState</button> 
); 
}; 

または

const FunctionalComponent = (props) => { 
    return (
    <button onClick={() => props.close('stringvalue')}>Click to setState</button> 
); 
};