在Formik中将(现有数据)添加到Array

Question

这是我的组件：

import { Field, FieldArray, Form, Formik } from "formik";
import { connect } from "react-redux";
import { withRouter } from "react-router";
import { updateEpisode } from "../../ducks/episodes/actions";
const AddActorToMovie = (
{ history, updateEpisode, episode, characters },
props
) => {
const handleSubmit = (values) => {
updateEpisode(values);
history.push("/episodes");
};
console.log("halo", episode);
return (
<div>
{episode ? (
<div>
<h3>Add Main Character to episode</h3>
<Formik
initialValues={{
id: episode.id,
title: episode.title,
release_date: episode.release_date,
series: episode.series,
img: episode.img,
charactersList: episode.charactersList, // this would be an array
}}
onSubmit={(values) => handleSubmit(values)}
enableReinitialize={true}
>
<Form>
<Field name="charactersList" as="select">
<option value=""> Brak informacji </option>
{characters.map((char) => (
<option
key={char.id}
value={char.id}
>{`${char.name}`}</option>
))}
</Field>
<button type="submit">Zatwierdz</button>
</Form>
</Formik>
</div>
) : (
<div>Loading...</div>
)}
</div>
);
};
const mapStateToProps = (state, props) => {
return {
episode: state.episodes.episodes
? state.episodes.episodes.find(
(x) => String(x.id) === props.match.params.id
)
: null,
characters: state.characters.characters,
};
};
const mapDispatchToProps = {
updateEpisode,
};
export default withRouter(
connect(mapStateToProps, mapDispatchToProps)(AddActorToMovie)
);

我想做的是，与其只向charactersList添加一个value = char.id，不如添加多个。因此，charactersList将是一个数组，我可以添加尽可能多的characters，如果可能的话，我也可以以这种形式添加delete，比如我使用updateEpisode操作，以便将更新的对象传递给我的状态。我知道我可能应该用FieldArray来做，但我不知道怎么做。

Answer 1

就我个人而言，我不使用<Field />，我更喜欢手动setFieldValue，因为它给你更多的自由。通过使用setFieldValue，您可以循环遍历char.id，并通过从"value.charactersList"中获取prev值将它们推送到charactersList，然后使用setFieldValue设置新值。

<Formik
initialValues={{
id: episode.id,
title: episode.title,
release_date: episode.release_date,
series: episode.series,
img: episode.img,
charactersList: episode.charactersList, // this would be an array
}}
onSubmit={(values) => handleSubmit(values)}
enableReinitialize={true}
>
{
({ values, setFieldValue, handleSubmit }) => (
<Form>
<h3>Character List</h3>
{
characters.map((char) => (
<button name={char.id} value={char.id} onclick={() => {
const oldData = values.charactersList;
if(!Array.isArray(oldData)) return;
const isExist = oldData?.includes(char.id)
if(isExist) {
// filter out the char u want to delete
const newData = oldData?.filter(i => i !== char.id)
setFieldValue('characterList', newData)
return;
}
const newData = oldData?.concat(char.id);
setFieldValue('characterList', newData);
}}>
{char.name}
</button>
))
}

<button type="submit" onclick={handleSubmit}>Zatwierdz</button>
</Form>
)
}
</Formik>

<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>
<script src="https://unpkg.com/formik/dist/formik.umd.production.min.js"></script>