react-redux 默认从 store 中选择值

Question

刚刚开始使用 React / Redux。 当数据来自商店时，我想设置我的选择的默认值。

应用 js。 （我正在从 Firebase db 获取数据，并将其提取到我的 Redux-store。

 componentDidMount() {
  let CurrentEmployees = [];
  const db = firebase.firestore();

  db.collection('employees').get()
      .then((result) => {
         CurrentEmployees = result.docs.map(one => one.data());
          this.props.employeesFetched(CurrentEmployees)
      });}

然后我试图从另一个组件“AddScore.js”中的商店获取数据：

const AddScore = () => {
const employees = useSelector(state => state.employees);  **<-- Get data from the store -->**

const db = firebase.firestore();
const[employee, setEmployee] = useState(employees[0]);  **<-- Set default state, but not working, couse data comes later -->**


const addScoreHandler = (e) => {
    e.preventDefault();

    const newScore = {
 employee: +employee
    };

    console.log(employee);  **<-- Without changing a select value it returns "undefined"-->**
};

return(<div>
    <form>
        <select onChange={event => setEmployee(event.target.value)}>

            {
                employees.map((one, index) => {
                    return (<option value={one.id} key={one.id}>{one.name + ' ' + one.lastname}</option> )
                })
            }
        </select>
        <button onClick={addScoreHandler}>AddScore</button>
    </form>

</div>)

};

我想保存用户没有更改选择值的情况。我的问题是如何将数据从 useSelector 传递到本地状态： const[employee, setEmployee] = useState(?);

我应该在“AddScore 组件”中再次从 Firebase 中获取员工吗？ (通过使用useEffect)

还有另一种专业的方式吗？

Answer 1

是的，您可以使用 useEffect 实现此目的，您可以添加 employees 作为 useEffect 依赖项。

const [employee, setEmployee] = useState();
const employees = useSelector(state => state.employees);

React.useEffect(() => {
    setEmployee[employees[0]]
}, [employees])