如果action.payload.number存在，用action.payload.points增加state.points

Question

在React-Native，我有两个TextInputs和一个add-button

我的add函数工作，即它创建一个列表。但是每次我填写表格时，它都会添加一个新的listpost。我想检查action.payload.number是否存在，如果是，使用action.payload.points增加state.points。

到目前为止，我尝试过的一切都失败了，即它没有识别state.number === action.payload.number，并在列表中添加了一个新行，请帮助我解决这个问题

预先谢谢皮埃尔

​

const InputScreen = () => {
  const [number, setNumber] = useState("");
  const [points, setPoints] = useState("");
  const {addScorer} = useContext(Context);
  const onPress = () => {
    addScorer(number, points);
    setnumber("");
    setPoints("");
  };

  return (
    <View>
      <Text style={styles.label}>enter Scorer Number:</Text>
      <TextInput style={styles.input} value={number} onChangeText={setNumber} />
      <Text style={styles.label}>enter Points Scored:</Text>
      <TextInput style={styles.input} value={points} onChangeText={setPoints} />
      <TouchableOpacity onPress={onPress}>
        <FontAwesome5 name="plus-circle" size={44} color="coral" />
      </TouchableOpacity>
    </View>
  );
};

export default InputScreen;

const scorerReducer = (state, action) => {
  const id = Date.now().toString().slice(-4);

  switch (action.type) {
   
    case "add_scorer":
      // if (state.number === action.payload.nummer) {
      if (state.find((scorer) => scorer.id === action.payload.id)) {
        return [
          ...state,
          {
            points: state.points + +action.payload.points,
          },
        ];
      } else {
        return [
          ...state,
          {
            id: id,
            number: action.payload.number,
            points: +action.payload.points,
          },
        ];
      }
    default:
      return state;
  }
};

const addScorer = (dispatch) => {
  return (number, points, id) => {
    dispatch({type: "add_scorer", payload: {number, points, id}});
  };
};


export const {Context, Provider} = createDataContext(
  scorerReducer,
  {addScorer},
  []
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

​

Answer 1

我不用Reducer就解决了它：)

​

export const ScoredProvider = ({children}) => {
  const [playerList, setPlayerList] = useState([]);
  const [number, setNumber] = useState("");
  const [points, setPoints] = useState("");

  const addScorer = () => {
    const players = [...playerList];
    if (number.trim().length === 0) {
      return;
    }
    const posit = players.map((player) => player.number).indexOf(number);
    if (posit !== -1) {
      setPlayerList((playerList) =>
        playerList.map((scorer, index) =>
          index === posit
            ? {
                ...scorer,
                points: scorer.points + +points,
              }
            : scorer
        )
      );
    } else {
      const newScorer = {
        id: Date.now(),
        number: number,
        points: +points,
      };
      setPlayerList([...playerList, newScorer]);
      setPoints(points);
    }
  };

  return (
    <ScoredContext.Provider
      value={{number, setNumber, points, setPoints, playerList, addScorer}}
    >
      {children}
    </ScoredContext.Provider>
  );
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

​