React Native Redux - Как обновить элемент в массиве?

Question

Я новичок ie с React Native и Redux, сейчас создаю приложение для викторин.

Я хочу обновить элемент (имя) в массиве. Может кто-нибудь сообщить мне, что не так с моим следующим кодом:

export const setName = name => ({
  type: "ADD_NAME",
  id: 1,
  name: name
});

INITIAL_STATE = [
  {
    id: 1,
    question: "documentary",
    answers: [
      { id: "1", text: "記録映画" },
      { id: "2", text: "理科" },
      { id: "3", text: "自由" },
      { id: "4", text: "形" }
    ],
    name: 0
  },
  {
    id: 2,
    question: "cozy",
    answers: [
      { id: "1", text: "居心地の良い" },
      { id: "2", text: "関係する" },
      { id: "3", text: "ブレーク" },
      { id: "4", text: "車" }
    ],
    name: 0
  },
  {
    id: 3,
    question: "utmost",
    answers: [
      { id: "1", text: "最大限" },
      { id: "2", text: "疑問に思う" },
      { id: "3", text: "昨日" },
      { id: "4", text: "まだ" }
    ],
    name: 0
  }
];

const reducer = (state = INITIAL_STATE, action) => {
  switch (action.type) {
    case "ADD_NAME":
      return state.map((item, index) => {
        if (item.id === 1) {
          return {
            ...item,
            name: ""
          };
        }
        return item;
      });

    default:
      return state;
  }
};

export const reducers = combineReducers({
  user: reducer
});

// store.js
export const store = createStore(reducers);

Сначала он работал, когда был только один массив. Вот так

INITIAL_STATE = {id: 1, вопрос: "документальный фильм", ответы: [{id: "1", текст: "記録 映 画"}, {id: "2", текст: "理科 "}, {id:" 3 ", текст:" 自由 "}, {id:" 4 ", текст:" 形 "}], имя: 0}

Но после добавления Массивы и изменение действий и редукторов. Это остаток кода Home. js (контейнер + компонент)

export class Home extends Component {
  render() {
    return (
      <View style={{flex: 1, justifyContent: 'space-around', alignItems: 'center'}}>
        <Text style={{marginTop: 100}}>My name is {this.props.name}.</Text>
        <View style={{flexDirection: 'row'}}>
          <Button
            onPress={() => this.props.setName(1)}
            title="setName"
          />
          <Button
            onPress={() => this.props.setName('2')}
            title="setName"
          />
        </View>
        <Text style={{marginBottom: 100}}>現在のstore: {JSON.stringify(store.getState())}</Text>
      </View>
    )
  }
}

const mapStateToProps = state => ({
  name: state.user.name
})

const mapDispatchToProps = {
  setName,
  deleteName
}

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(Home)

Answer 1

Это должно работать.

const reducer = (state = INITIAL_STATE, action) => {
  switch (action.type) {
    case "ADD_NAME":
      const { id = 1, name = "" } = action;
      return state.map(item => ({
        ...item,
        name: item.id === id ? name : item.name
      }));
    default:
      return state;
  }
};

Answer 2

Похоже, вы не обновляете name prop, а просто устанавливаете его в пустую строку. Также вы, вероятно, передадите элемент id и будете использовать его для поиска:

export const setName = (name, id) => ({ // pass item's id
  type: "ADD_NAME",
  id,
  name
});

const reducer = (state = INITIAL_STATE, action) => {
  switch (action.type) {
    case "ADD_NAME":
      return state.map(item => {
        if (item.id === action.id) {  // Match the item by id and update its name
          return {
            ...item,
            name: action.name
          };
        }
        return item;
      });

    default:
      return state;
  }
};