由于返回数组的 function 的结果，我们如何在 useState 中设置 Initial state？

Question

my JSON object consist of correct_answer which is of string type and incorrect_answers which is an array I want to push correct answer in the incorrect_answers array,and after modification I want this JSON object as the initial value of our state modified that I have created using React hooks.How can I achieve this.

var css = "ma2 pa2 br-pill dim pointer grow hover w-20";

const Logic = (props) => {
  const ques = props.questions;
  const [count, setCount] = useState(0);
  //const [ques, setQues] = useState(props.questions);
  const [modified, setModified] = useState((ques) => () => {
    for (var i = 0; i < ques.length; i++) {
      ques[i].incorrect_answers.push(ques[i].correct_answer);
    }
    return ques;
  });
  return (
    <div className="tc">
      {modified.length !== 0 ? (
        <div>
          {modified[count].incorrect_answers.map((home) => (
            <div>
              <button className={css}>{home}</button>
            </div>
          ))}
        </div>
      ) : (
        <h1>loading</h1>
      )}
    </div>
  );
};

export default Logic;

my JSON object that i am getting as a props looks like

{
>     "response_code": 0,
>     "results": [
>         {
>             "category": "Entertainment: Video Games",
>             "type": "multiple",
>             "difficulty": "medium",
>             "question": "When was the original Star Wars: Battlefront II released?",
>             "correct_answer": "October 31, 2005",
>             "incorrect_answers": [
>                 "December 18, 2004",
>                 "November 21, 2006",
>                 "September 9, 2007"
>             ]
>         },
>         {
>             "category": "Entertainment: Japanese Anime & Manga",
>             "type": "multiple",
>             "difficulty": "medium",
>             "question": "In Dragon Ball Z, who was the first character to go Super Saiyan 2?",
>             "correct_answer": "Gohan",
>             "incorrect_answers": [
>                 "Goku",
>                 "Vegeta",
>                 "Trunks"
>             ]
>         },
>         {
>             "category": "Science & Nature",
>             "type": "multiple",
>             "difficulty": "easy",
>             "question": "The human heart has how many chambers?",
>             "correct_answer": "4",
>             "incorrect_answers": [
>                 "2",
>                 "6",
>                 "3"
>             ]
>         }
>          }

Answer 1

You can use useEffect hook to manupulate the data and store it in modified.

const [modified, setModified] = useState([]);    
    useEffect(() => {
           setModified(props.questions.map(data=>({...data,incorrect_answers:data.incorrect_answers.concat([data.correct_answer])})));
         }, [props.questions]);