Hide/show 有反应的元素-select - 元素不隐藏

Question

我正在使用带有状态列表的 react-select 库，然后将其用于 hide/show 我的元素当我从列表中 select 时，这些元素会显示，但当它们被删除时不会隐藏。这是代码：

import React from 'react';
import Select from 'react-select';

const options = [
    { value: 'ny', label: 'NY' },
    { value: 'ca', label: 'California' },
    { value: 'ak', label: 'Arkansas' }
];

export default class HomePage extends React.Component {
    constructor(props) {
        super(props);
        this.state = {}
    }

    handleChange = (selectedOption) => {
        if (!selectedOption) {
            this.setState({})
        }
        else {
            const result = {}
            
            selectedOption.map((option) => {
                result[option.value] = true
            })

            this.setState(result)
        }
    }

    render() {
        return (
            <div>
                <Select
                    isMulti
                    onChange={this.handleChange}
                    options={options}
                />
                {this.state.ny && (
                    <div>NY State Images</div>
                )}
                {this.state.ca && (
                    <div>CA State Images</div>
                )}
                {this.state.ak && (
                    <div>AK State Images</div>
                )}
            </div>
        )
    }
}

Answer 1

React.Component有点奇怪。

尝试使用功能组件：

export default function HomePage() {
  const [state, setState] = useState({});

  const handleChange = selectedOption => {
    console.log("CHANGE_HAPPEN: ", selectedOption);
    if (!selectedOption) {
      setState({});
    } else {
      const result = {};

      selectedOption.forEach(option => {
        result[option.value] = true;
      });
      console.log("RESULT: ", result);
      setState(prev => result);
    }
  };

  return (
    <div>
      <Select isMulti onChange={handleChange} options={options} />
      {state.ny && <div>NY State Images</div>}
      {state.ca && <div>CA State Images</div>}
      {state.ak && <div>AK State Images</div>}
    </div>
  );
}

Hide/show 有反应的元素-select - 元素不隐藏

Hide/show elements with react-select - elements not hiding

javascript

reactjs

react-select