字符串数组未在反应中呈现

Question

I want to see my array rendered everytime I select an option from my dropdown. But, it doesn't show immediately on changing elements in dropdown. How can I solve this?

import React, { useState } from "react";
import "./styles.css";

const removeTags = (tagToRemove, currentTag, setCurrentTag) => {
  let temp = currentTag;
  setCurrentTag(temp.filter(each => each !== currentTag));
};

export default function App() {
  const [currentTag, setCurrentTag] = useState([]);

  return (
    <div>
      <select
        onChange={e => {
          let temp = currentTag;
          temp.push(e.target.value);
          console.log(temp);
          setCurrentTag(temp);
        }}
      >
        <option>1</option>
        <option>2</option>
        <option>3</option>
      </select>
      {currentTag !== null
        ? currentTag.map((each, index) => (
            <span
              key={index}
              className="tag"
              style={{ backgroundColor: "white" }}
            >
              <span className="tag is-link" style={{ marginLeft: ".5em" }}>
                {each}
              </span>
              <a
                className="tag is-delete"
                onClick={() => removeTags(each, currentTag, setCurrentTag)}
              />
            </span>
          ))
        : ""}
    </div>
  );
}

Here is my code, codesandbox

Answer 1

The function to update state value setCurrentTag accepts a new state value .

  <select
    onChange={e => {
      setCurrentTag([...currentTag, e.target.value]);
    }}
  >
    <option>1</option>
    <option>2</option>
    <option>3</option>
  </select>

Your mistake was to mutate state value and pass it to setCurrentTag instead of creating a new value

  onChange={e => {
    let temp = currentTag; // currentTag is an array, so temp store reference to that array, and not a new array

    temp.push(e.target.value); // push method changes array temp, which refers to currentTag

    console.log(temp);
    setCurrentTag(temp); // pass the same mutated currentTag array
 }}

https://codesandbox.io/s/st-of-react-array-example-tdts8

Answer 2

To add items to array state you can use setState like that:

setCurrentTag(old => [...old, newItem]);

And to remove item from the array use like this:

setCurrentTag(old => old.filter(a => a != itemToRemove));

Here's sandbox .

import React, { useState } from "react";
import "./styles.css";

export default function App() {
  const [currentTag, setCurrentTag] = useState([]);

  return (
    <div>
      <select
        onChange={e => {
          let value = e.target.value;
          setCurrentTag(old => [...old, value]);
        }}
      >
        <option>1</option>
        <option>2</option>
        <option>3</option>
      </select>
      {currentTag !== null
        ? currentTag.map((each, index) => (
            <span
              key={index}
              className="tag"
              style={{ backgroundColor: "white" }}
            >
              <span className="tag is-link" style={{ marginLeft: ".5em" }}>
                {each}
              </span>
              <a
                className="tag is-delete"
                onClick={() => {
                  setCurrentTag(old => old.filter(a => each !== a));
                }}
              />
            </span>
          ))
        : ""}
    </div>
  );
}

Answer 3

import React, { useState } from "react";
import { isEmpty } from "lodash";

function addTags(e, value, setCurrentTag, setAllSectorsSelected) {
  console.log("in addTags,e,value: ", e, value);
}

const removeTags = (tagToRemove, currentTag, setCurrentTag) => {
  let temp = currentTag;
  setCurrentTag(temp.filter(each => each !== currentTag));
};

export default function App() {
  const [currentTag, setCurrentTag] = useState([]);

  const tagSelector = event => {
    // spreading over the previously added options
    setCurrentTag([...currentTag, event.target.value]);
  };

  console.log({ currentTag });
  return (
    <div>
      <select onChange={event => tagSelector(event)}>
        <option>1</option>
        <option>2</option>
        <option>3</option>
      </select>
      <DisplayOption {...{ currentTag, setCurrentTag }} />
    </div>
  );
}

function DisplayOption(props) {
  const { currentTag, setCurrentTag } = props;

  if (isEmpty(currentTag)) return null;

  return currentTag.map((each, index) => (
    <span key={index} className="tag" style={{ backgroundColor: "red" }}>
      <span
        className="tag is-link"
        style={{ marginLeft: ".5em", fontSize: "16px", fontColor: "red" }}
      >
        {each}
      </span>
      <div
        href=""
        className="tag is-delete"
        onClick={() => removeTags(each, currentTag, setCurrentTag)}
      />
    </span>
  ));
}