反应 UseEffect 更新 State 但没有重新渲染

Question

I have an extremely simple issue in which I would like to load input devices and list them. The Web API for Media Devices shows it returns a promise, so I assumed I would have to load this into the state with a useEffect hook.

React Developer tools shows a list of strings in the inputs array, although the state does not update.

const App = () => {

  const [inputs, setInputs] = useState([]);

  useEffect(() => {
    let inputDevices = [];
    navigator.mediaDevices.enumerateDevices().then((devices) => {
      devices.forEach((device) => inputDevices.push(device.label));
    });
    setInputs([inputDevices]);
  }, []);


  return (
    <div>
      <ol>
        {inputs.map((device, index) => {
          return (
            <li key={index}>
              id:{index} - Device: {device}{" "}
            </li>
          );
        })}
      </ol>
    </div>
  );

output:

edit: the setinputs([inputDevices]) was an accident, thank you all who reminded me about the asynchronicity of the promise:)

Answer 1

The issue is setInputs will be execute before the then callback, so you need to setInputs inside the then callback, and you can use map to get the list of labels .

    let inputDevices = [];
    navigator.mediaDevices.enumerateDevices().then((devices) => {
      setInputs(devices.map((device) => device.label))
    });

Answer 2

  let inputDevices = [];
    navigator.mediaDevices.enumerateDevices().then((devices) => {
      devices.forEach((device) => inputDevices.push(device.label));
    });
    setInputs([inputDevices]);

You need to call set state inside then . Promises are resolved asynchronously hence when you call setInputs where you have it by that time data isn't there yet.

You can also just utilize map :

setInputs(devices.map((device) => device.label)) // inside .then

Answer 3

Promises are resolved asynchronously so you need to push the setInputs(inputDevices) inside then.

You can change your code too,

navigator.mediaDevices.enumerateDevices().then((devices) => {
   return devices.map(device => device.label);
 })
.then(transformedArray => setInputs(transformedArray))

And one more thing in your code, you are setting the state like this

setInputs([inputDevices]); // like an array inside array

But inside your code, you are accessing it like,

 {inputs.map((device, index) => {
          return (
            <li key={index}>
              id:{index} - Device: {device}{" "}
            </li>
          );
 })}

So change it to,

inputs[0].map()

or update the state like this,

setInputs(inputDevices)