基于Dropdown的React Effector状态管理

Question

我正在使用 React Hooks 和 Effector 尝试将数据渲染到卡片上。数据将从React-Select下拉列表中删除（代表不同的国家/地区），其想法是用户将能够根据这些国家/地区添加选择，有点像 TODO 应用程序。

但是，我发现每当我返回上一个下拉选择时，数据都不会保存。我使用effector，hooks，react-select和react-jss对造型。团队作为React-Select组件的道具传递。

const PlayerComponent = ({ containerStyles, team }) => {

    const [items, setItems] = useState([]);

    const teamsStore = useStore(testTeams);
    const playersStore = useStore(testPlayers);

    useEffect(() => {

        const playersByTeam = playersStore.filter(
            (player) =>
                player.teamId ===
                teamsStore.find(function (t) {
                    return t.label === team;
                }).teamId
        );
    
        setItems(
            playersByTeam.map(function (player) {
                let players = { name: player.name };
                return players;
            })
        );
    }, [playersStore,team,teamsStore]);

    function onAddButtonClick() {
        setItems((prev) => {
            const newItems = [...prev];

            newItems.push({
                name: `Player ${newItems.length + 1}`
            });

            playersStore.push({
                name: `Player ${newItems.length + 1}`
            });

            return newItems;
        });
    }

    function renderAddButton() {
        return (
            <Row
                horizontal='center'
                vertical='center'
                onClick={onAddButtonClick}
            >
                Add Player
            </Row>
        );
    }

    return (
        <CardComponent
            containerStyles={containerStyles}
            title={team}
            items={[
                <Row horizontal='space-between' vertical='center'>
                    <span>
                        Create new player
                    </span>
                    {renderAddButton()}
                </Row>,
                ...items.map((item, index) => (
                    <Player index={index} item={item} />
                ))
            ]}
        />
    );
};

这是我的Player组件，每个组件代表一行：

function Player({item = {} }) {
    return (
        <Row horizontal='space-between' vertical='center'>
            <Row>
                <span>{item.name}</span>
            </Row>
        </Row>
    );
}

这是一个示例图像。基本上，从下拉列表中选择一个国家（比如英格兰）后，我可以添加一个玩家，它会呈现在卡片上 - 但是，当我选择一个不同的国家并返回前一个国家时，添加的玩家消失了。任何想法如何解决这个问题？我现在正在对这个onAddButtonClick()功能感到困惑......

Answer 1

我不是 Effector 方面的专家，但我认为像大多数状态管理器一样，它依赖于状态不被改变，这就是你在 Push 时所做的playersStore。使用像我下面描述的减速器是正确的解决方案。

另外，我对应该是什么感到有点困惑items，因为据我所知，它是从商店和状态派生出来的，因此本身不应该是状态。

最后，使用对useEffect我来说没有意义。通常这用于在渲染时触发操作。您真正想要在这里做的事情要简单得多...即只需获取当前状态并正确渲染它。

我对其进行了一些简化，以删除不真正相关的内容。

基本上它的工作原理是这样的。该商店是国家名称到玩家列表的映射。当您需要对此进行更改时，您可以使用此减速器，它返回一个全新的对象，其中包含旧对象的所有状态，但是添加玩家的国家/地区也是一个新数组，包含旧内容，加上额外添加的项目。

const onAddPlayer = (state, payload) => {
  const newState = { ...state };
  newState[payload["country"]] = [
    ...newState[payload["country"]],
    payload["player"]
  ];
  return newState;
};

// Create the store, registering the reducer for the addPlayer event.
const playersByCountry = createStore(initialStore).on(addPlayer, onAddPlayer);

此外，还有一个useState变量可以跟踪当前选定的国家/地区。

完整代码，也可在codesandbox.io上找到

import React, { useState } from "react";
import { createStore, createEvent } from "effector";
import { useStore } from "effector-react";
import "./styles.css";
import Select from "react-select";

const initialStore = {
  France: [],
  Germany: ["Hans", "Kurt"],
  Italy: ["Francesca"]
};

const addPlayer = createEvent();

const onAddPlayer = (state, payload) => {
  const newState = { ...state };
  newState[payload["country"]] = [
    ...newState[payload["country"]],
    payload["player"]
  ];
  return newState;
};

const playersByCountry = createStore(initialStore).on(addPlayer, onAddPlayer);

export default () => {
  const pbc = useStore(playersByCountry);
  const options = Object.keys(pbc).map((item) => ({
    value: item,
    label: item
  }));
  const [country, setCountry] = useState(options[0]);
  const [playerInput, setPlayerInput] = useState("");
  const players = pbc[country["value"]];

  // When selector is changed, clear the input and set the
  // state `country` which is the current selection
  const handleCountryChange = (event) => {
    setCountry(event);
    setPlayerInput("");
  };

  // Controlled input state update
  const handlePlayerInputChange = (event) => {
    setPlayerInput(event.target.value);
  };

  // Pressing submit clears the input and adds the player
  // to the store
  const handlePlayerSubmit = (event) => {
    addPlayer({
      country: country["value"],
      player: playerInput
    });
    setPlayerInput("");
    event.preventDefault();
  };

  return (
    <>
      <Select
        defaultValue={country}
        options={options}
        onChange={handleCountryChange}
      />
      <div>
        <h1>Existing Players</h1>
        <ul>
          {players.map((player) => (
            <li>{player}</li>
          ))}
        </ul>
      </div>
      <form onSubmit={handlePlayerSubmit}>
        <label>
          Player:
          <input
            type="text"
            name="player"
            value={playerInput}
            onChange={handlePlayerInputChange}
          />
        </label>
        <input type="submit" value="Add" />
      </form>
    </>
  );
};